@moni-labs/moni-ui 0.4.4 → 0.4.6

package/docs/components/bottom-sheet.md

@@ -0,0 +1,220 @@
+# Bottom Sheet
+
+Componente Material Design 3 Bottom Sheet.
+
+Los bottom sheets son superficies ancladas a la parte inferior de la pantalla que
+complementan la vista principal. Muestran contenido complementario, acciones
+contextuales, o flujos de tareas sin ocultar por completo el contenido principal.
+
+**Referencia de la especificación M3:** `m3-docs/components/sheets-bottom/specs.md`
+
+**Nota de implementación — elemento nativo `<dialog>`:**
+Al igual que `<moni-dialog>`, este componente envuelve el elemento nativo `<dialog>`.
+La propiedad `open` controla `dialog.showModal()` / `dialog.close()`. Cuando
+`modal=true` (por defecto), se renderiza automáticamente un fondo `::backdrop`.
+
+**Teletransportación (montaje a nivel del body):**
+Cuando `positioning="body"` (por defecto), el componente se mueve a
+`document.body` en `connectedCallback` para que el diálogo inferior fijo se renderice
+por encima de todos los contextos de apilamiento. En `disconnectedCallback`, se mueve de nuevo
+a su posición original en el DOM. Esto evita el recorte por un ancestro con `overflow: hidden`
+o `transform`.
+
+**Tamaños:**
+- `small`  — Hoja compacta; adecuada para menús de acciones simples.
+- `medium` — Altura estándar (por defecto).
+- `large`  — Altura expandida (`expandedHeight` controla el block-size máximo).
+- `auto`   — Altura impulsada por el contenido.
+
+- Tag: `moni-bottom-sheet`
+- Clase: `MoniBottomSheet`
+- Fuente: `src/components/moni-bottom-sheet.ts`
+
+## Cuándo usarlo
+
+Usa `moni-bottom-sheet` cuando la interfaz necesite el patrón que describe este componente. Antes de elegirlo, revisa sus estados, contenido permitido y comportamiento accesible; las capturas del final muestran el resultado real de cada variante.
+
+## Uso básico
+
+```html
+<moni-bottom-sheet title="Compartir" handle>
+  <moni-list-item icon="share">Copiar enlace</moni-list-item>
+  <moni-list-item icon="mail">Enviar por correo</moni-list-item>
+</moni-bottom-sheet>
+
+<script>
+  document.querySelector('moni-bottom-sheet').open = true;
+</script>
+```
+
+## Ejemplo práctico con Tailwind CSS v4
+
+Tailwind controla composición, ancho, espaciado y responsividad alrededor del Web Component. Moni UI conserva el aspecto interno mediante Shadow DOM y design tokens.
+
+```html
+<div class="mx-auto flex w-full max-w-md flex-col gap-4 p-6">
+  <moni-bottom-sheet></moni-bottom-sheet>
+</div>
+```
+
+No necesitas un plugin de Tailwind. En tu CSS v4 importa ambas capas una sola vez:
+
+```css
+@import "tailwindcss";
+@import "@moni-labs/moni-ui/styles";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses selectores Tailwind para asumir acceso al DOM interno; personaliza únicamente con los CSS Parts y Custom Properties públicos enumerados más abajo.
+
+## Recomendaciones
+
+- Usa `moni-bottom-sheet` para su propósito semántico; no lo sustituyas por un `div` estilizado.
+- Aplica Tailwind al layout exterior. Para el interior del Shadow DOM usa las variables CSS y `::part()` documentados.
+- Mantén el estado de apertura en una única fuente de verdad y devuelve el foco al disparador al cerrar.
+- Prueba los estados claro, oscuro, foco por teclado, deshabilitado y viewport móvil antes de publicar.
+
+## Propiedades y atributos
+
+| Atributo | Propiedad | Tipo | Default | Descripción |
+|---|---|---|---|---|
+| `open` | `open` | `boolean` | `false` | Controla el estado abierto/cerrado del bottom sheet.  Cuando se establece en `true`, llama a `dialog.showModal()` o `dialog.show()` dependiendo de la propiedad `modal`. Cuando se establece en `false`, llama a `dialog.close()`. |
+| `size` | `size` | `'small' \| 'medium' \| 'large' \| 'auto'` | `'medium'` | Variante de altura del contenedor de la hoja.  - `'small'`  — Compacta; adecuada para confirmaciones rápidas. - `'medium'` — Altura estándar (por defecto). - `'large'`  — Llena el `expandedHeight` de la ventana gráfica. - `'auto'`   — Depende del contenido; la altura se adapta al contenido en el slot. |
+| `modal` | `modal` | `boolean` | `true` | Cuando es `true` (por defecto), la hoja se abre como un diálogo modal con un fondo translúcido (scrim). Cuando es `false`, se abre como una superposición no modal sin scrim. |
+| `title` | `title` | `string` | `''` | Texto de encabezado mostrado en el área del encabezado de la hoja. |
+| `handle` | `handle` | `boolean` | `false` | Muestra el indicador visual de arrastre en la parte superior de la hoja.  El asa es opcional según la especificación M3. Su indicador mide 32 × 4dp, pero la zona interactiva ocupa todo el ancho y 48dp de alto para facilitar el agarre. El encabezado continúa admitiendo gestos de arrastre aunque el indicador esté oculto. |
+| `positioning` | `positioning` | `'body' \| 'fixed' \| 'absolute' \| 'static'` | `'fixed'` | Controla cómo se posiciona la hoja en el documento.  - `'body'` (por defecto) — Teletransporta el elemento a `document.body` para que   la superposición fija se renderice por encima de todos los contextos de apilamiento. - `'fixed'` — Posicionamiento fijo dentro de su subárbol DOM actual. - `'absolute'` — Absoluto dentro del ancestro posicionado más cercano. - `'static'` — Flujo estático (rara vez necesario; solo para pruebas). |
+| `expanded-height` | `expandedHeight` | `string` | `'85%'` | Block-size (altura) máximo de la hoja cuando `size="large"`.  Acepta cualquier valor válido de `max-block-size` en CSS (ej. `'85%'`, `'600px'`). Por defecto es `'85%'` que es el máximo recomendado por M3 para bottom sheets en pantallas compactas. |
+| `max-width` | `maxWidth` | `string` | `''` | Restricción opcional de inline-size (ancho) máximo para la hoja.  Cuando se establece (ej. `'640px'`), la hoja no excederá este ancho incluso en pantallas anchas. Útil para puntos de interrupción de tableta/escritorio donde se prefiere un modal centrado en lugar de una hoja de ancho completo. |
+
+## Slots
+
+- `default`: El contenido principal del bottom sheet.
+- `handle`: El área del asa de arrastre en la parte superior.
+- `footer`: Botones de acción en la parte inferior de la hoja.
+
+## Eventos
+
+No declara eventos propios.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+- `dialog`: Parte interna personalizable.
+- `header`: Parte interna personalizable.
+- `body`: El área de contenido principal desplazable (scrollable).
+- `footer`: Parte interna personalizable.
+- `content`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--_padding`
+- `--elevate3`
+- `--moni-bottom-sheet-expanded-height`
+- `--moni-bottom-sheet-max-width`
+- `--on-surface`
+- `--on-surface-variant`
+- `--speed3`
+- `--surface`
+
+## Referencia visual por variable
+
+Cada imagen se genera con el componente real: cambia solo la variable indicada y mantiene estable el resto del escenario. Úsala para comparar estados, no como sustituto de la API.
+
+### `open`
+
+Controla el estado abierto/cerrado del bottom sheet.
+
+Cuando se establece en `true`, llama a `dialog.showModal()` o `dialog.show()`
+dependiendo de la propiedad `modal`. Cuando se establece en `false`, llama a `dialog.close()`.
+
+![moni-bottom-sheet — open=true](../assets/moni-bottom-sheet/open--true.png)
+
+### `size`
+
+Variante de altura del contenedor de la hoja.
+
+- `'small'`  — Compacta; adecuada para confirmaciones rápidas.
+- `'medium'` — Altura estándar (por defecto).
+- `'large'`  — Llena el `expandedHeight` de la ventana gráfica.
+- `'auto'`   — Depende del contenido; la altura se adapta al contenido en el slot.
+
+![moni-bottom-sheet — size=small](../assets/moni-bottom-sheet/size--small.png)
+
+![moni-bottom-sheet — size=medium](../assets/moni-bottom-sheet/size--medium.png)
+
+![moni-bottom-sheet — size=large](../assets/moni-bottom-sheet/size--large.png)
+
+![moni-bottom-sheet — size=auto](../assets/moni-bottom-sheet/size--auto.png)
+
+### `modal`
+
+Cuando es `true` (por defecto), la hoja se abre como un diálogo modal con un
+fondo translúcido (scrim). Cuando es `false`, se abre como una superposición no modal sin scrim.
+
+![moni-bottom-sheet — modal=false](../assets/moni-bottom-sheet/modal--false.png)
+
+![moni-bottom-sheet — modal=true](../assets/moni-bottom-sheet/modal--true.png)
+
+### `title`
+
+Texto de encabezado mostrado en el área del encabezado de la hoja.
+
+![moni-bottom-sheet — title=default](../assets/moni-bottom-sheet/title--default.png)
+
+### `handle`
+
+Muestra el indicador visual de arrastre en la parte superior de la hoja.
+
+El asa es opcional según la especificación M3. Su indicador mide 32 × 4dp,
+pero la zona interactiva ocupa todo el ancho y 48dp de alto para facilitar
+el agarre. El encabezado continúa admitiendo gestos de arrastre aunque el
+indicador esté oculto.
+
+![moni-bottom-sheet — handle=false](../assets/moni-bottom-sheet/handle--false.png)
+
+![moni-bottom-sheet — handle=true](../assets/moni-bottom-sheet/handle--true.png)
+
+### `positioning`
+
+Controla cómo se posiciona la hoja en el documento.
+
+- `'body'` (por defecto) — Teletransporta el elemento a `document.body` para que
+  la superposición fija se renderice por encima de todos los contextos de apilamiento.
+- `'fixed'` — Posicionamiento fijo dentro de su subárbol DOM actual.
+- `'absolute'` — Absoluto dentro del ancestro posicionado más cercano.
+- `'static'` — Flujo estático (rara vez necesario; solo para pruebas).
+
+![moni-bottom-sheet — positioning=body](../assets/moni-bottom-sheet/positioning--body.png)
+
+![moni-bottom-sheet — positioning=fixed](../assets/moni-bottom-sheet/positioning--fixed.png)
+
+![moni-bottom-sheet — positioning=absolute](../assets/moni-bottom-sheet/positioning--absolute.png)
+
+![moni-bottom-sheet — positioning=static](../assets/moni-bottom-sheet/positioning--static.png)
+
+### `expanded-height`
+
+Block-size (altura) máximo de la hoja cuando `size="large"`.
+
+Acepta cualquier valor válido de `max-block-size` en CSS (ej. `'85%'`, `'600px'`).
+Por defecto es `'85%'` que es el máximo recomendado por M3 para bottom sheets
+en pantallas compactas.
+
+![moni-bottom-sheet — expanded-height=default](../assets/moni-bottom-sheet/expandedHeight--default.png)
+
+### `max-width`
+
+Restricción opcional de inline-size (ancho) máximo para la hoja.
+
+Cuando se establece (ej. `'640px'`), la hoja no excederá este ancho incluso en
+pantallas anchas. Útil para puntos de interrupción de tableta/escritorio donde se prefiere
+un modal centrado en lugar de una hoja de ancho completo.
+
+![moni-bottom-sheet — max-width=default](../assets/moni-bottom-sheet/maxWidth--default.png)

package/docs/components/button-group.md

@@ -0,0 +1,207 @@
+# Button Group
+
+Componente Material Design 3 Button Group.
+
+Organiza múltiples componentes `<moni-button>` o `<moni-icon-button>`
+en una sola fila.
+
+**Variantes:**
+- `standard` (por defecto) — Una fila flex simple con un espacio entre botones.
+- `connected` — El reemplazo de M3 Expressive para los botones segmentados. En este
+  modo, los botones comparten bordes y forman una sola forma de píldora continua. El
+  grupo gestiona el estado de selección única/múltiple de sus hijos.
+
+**Detalles de la variante `connected`:**
+- **Propagación de forma:** El grupo propaga automáticamente las clases de forma M3
+  (`left-round-flat`, `no-round`, `right-round-flat`) a sus hijos para
+  que se entrelacen sin problemas.
+- **Gestión del interruptor:** El grupo escucha los clics de los hijos y cambia sus
+  atributos `active`. Cuando `multi=false` (por defecto), solo un botón puede estar
+  activo a la vez (comportamiento de radio button). Cuando `multi=true`, múltiples botones
+  pueden estar activos (comportamiento de checkbox).
+- **Propagación de eventos:** Dispara un evento `'change'` cuando la selección cambia.
+
+**Accesibilidad:**
+- Renderiza con `role="group"` (puede ser sobrescrito a `toolbar` o `radiogroup`).
+- Los consumidores deben proporcionar un atributo `aria-label` o `aria-labelledby`
+  para identificar el propósito del grupo para las tecnologías de asistencia.
+
+- Tag: `moni-button-group`
+- Clase: `MoniButtonGroup`
+- Fuente: `src/components/moni-button-group.ts`
+
+## Cuándo usarlo
+
+Usa `moni-button-group` cuando la interfaz necesite el patrón que describe este componente. Antes de elegirlo, revisa sus estados, contenido permitido y comportamiento accesible; las capturas del final muestran el resultado real de cada variante.
+
+## Uso básico
+
+```html
+<!-- Grupo conectado de selección única -->
+<moni-button-group variant="connected" label="Alineación">
+  <moni-button icon="format_align_left" active></moni-button>
+  <moni-button icon="format_align_center"></moni-button>
+  <moni-button icon="format_align_right"></moni-button>
+</moni-button-group>
+
+<!-- Fila estándar de botones -->
+<moni-button-group gap="1rem">
+  <moni-button variant="text">Cancelar</moni-button>
+  <moni-button>Guardar</moni-button>
+</moni-button-group>
+```
+
+## Ejemplo práctico con Tailwind CSS v4
+
+Tailwind controla composición, ancho, espaciado y responsividad alrededor del Web Component. Moni UI conserva el aspecto interno mediante Shadow DOM y design tokens.
+
+```html
+<div class="mx-auto flex w-full max-w-md flex-col gap-4 p-6">
+  <moni-button-group label="Ejemplo"></moni-button-group>
+</div>
+```
+
+No necesitas un plugin de Tailwind. En tu CSS v4 importa ambas capas una sola vez:
+
+```css
+@import "tailwindcss";
+@import "@moni-labs/moni-ui/styles";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses selectores Tailwind para asumir acceso al DOM interno; personaliza únicamente con los CSS Parts y Custom Properties públicos enumerados más abajo.
+
+## Recomendaciones
+
+- Usa `moni-button-group` para su propósito semántico; no lo sustituyas por un `div` estilizado.
+- Aplica Tailwind al layout exterior. Para el interior del Shadow DOM usa las variables CSS y `::part()` documentados.
+- Prueba los estados claro, oscuro, foco por teclado, deshabilitado y viewport móvil antes de publicar.
+
+## Propiedades y atributos
+
+| Atributo | Propiedad | Tipo | Default | Descripción |
+|---|---|---|---|---|
+| `variant` | `variant` | `'standard' \| 'connected'` | `'standard'` | Variante visual del grupo de botones. - `standard`: Los elementos se espacian normalmente. - `connected`: Los elementos se unen con bordes colapsados y radios internos aplanados. |
+| `size` | `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'extra'` | `'small'` | Tamaño de los botones en el grupo. Si se especifica, se propaga hacia abajo a los hijos. |
+| `multi` | `multi` | `boolean` | `false` | Permite que múltiples botones estén activos a la vez (solo aplica a grupos seleccionables). |
+| `selection-required` | `selectionRequired` | `boolean` | `false` | Impide que el grupo quede sin selección. |
+| `shape` | `shape` | `'round' \| 'square'` | `'round'` | Forma base común de los botones. La selección invierte round ↔ square. |
+| `resizing` | `resizing` | `'fixed' \| 'flexible'` | `'fixed'` | Controla si los botones conservan su ancho intrínseco o llenan la superficie. |
+| `gap` | `gap` | `string` | `''` | Espacio CSS personalizado entre botones (ej., '1rem'). Solo se aplica cuando la variante es 'standard'. |
+| `role` | `role` | `'group' \| 'toolbar' \| 'radiogroup'` | `'group'` | Rol ARIA del contenedor del grupo. |
+| `label` | `label` | `string` | `''` | Una etiqueta accesible para el grupo (`aria-label`). |
+| `labelled-by` | `labelledBy` | `string` | `''` | ID de un elemento que etiqueta este grupo (`aria-labelledby`). |
+
+## Slots
+
+- `default`: Los elementos `<moni-button>` que conforman el grupo.
+
+## Eventos
+
+- `change`: evento compuesto y burbujeante emitido por el componente.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+- `container`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--_moni-group-flex-grow`
+
+## Referencia visual por variable
+
+Cada imagen se genera con el componente real: cambia solo la variable indicada y mantiene estable el resto del escenario. Úsala para comparar estados, no como sustituto de la API.
+
+### `variant`
+
+Variante visual del grupo de botones.
+- `standard`: Los elementos se espacian normalmente.
+- `connected`: Los elementos se unen con bordes colapsados y radios internos aplanados.
+
+![moni-button-group — variant=standard](../assets/moni-button-group/variant--standard.png)
+
+![moni-button-group — variant=connected](../assets/moni-button-group/variant--connected.png)
+
+### `size`
+
+Tamaño de los botones en el grupo. Si se especifica, se propaga hacia abajo a los hijos.
+
+![moni-button-group — size=xsmall](../assets/moni-button-group/size--xsmall.png)
+
+![moni-button-group — size=small](../assets/moni-button-group/size--small.png)
+
+![moni-button-group — size=medium](../assets/moni-button-group/size--medium.png)
+
+![moni-button-group — size=large](../assets/moni-button-group/size--large.png)
+
+![moni-button-group — size=xlarge](../assets/moni-button-group/size--xlarge.png)
+
+![moni-button-group — size=extra](../assets/moni-button-group/size--extra.png)
+
+### `multi`
+
+Permite que múltiples botones estén activos a la vez (solo aplica a grupos seleccionables).
+
+![moni-button-group — multi=false](../assets/moni-button-group/multi--false.png)
+
+![moni-button-group — multi=true](../assets/moni-button-group/multi--true.png)
+
+### `selection-required`
+
+Impide que el grupo quede sin selección.
+
+![moni-button-group — selection-required=false](../assets/moni-button-group/selectionRequired--false.png)
+
+![moni-button-group — selection-required=true](../assets/moni-button-group/selectionRequired--true.png)
+
+### `shape`
+
+Forma base común de los botones. La selección invierte round ↔ square.
+
+![moni-button-group — shape=round](../assets/moni-button-group/shape--round.png)
+
+![moni-button-group — shape=square](../assets/moni-button-group/shape--square.png)
+
+### `resizing`
+
+Controla si los botones conservan su ancho intrínseco o llenan la superficie.
+
+![moni-button-group — resizing=fixed](../assets/moni-button-group/resizing--fixed.png)
+
+![moni-button-group — resizing=flexible](../assets/moni-button-group/resizing--flexible.png)
+
+### `gap`
+
+Espacio CSS personalizado entre botones (ej., '1rem').
+Solo se aplica cuando la variante es 'standard'.
+
+![moni-button-group — gap=default](../assets/moni-button-group/gap--default.png)
+
+### `role`
+
+Rol ARIA del contenedor del grupo.
+
+![moni-button-group — role=group](../assets/moni-button-group/role--group.png)
+
+![moni-button-group — role=toolbar](../assets/moni-button-group/role--toolbar.png)
+
+![moni-button-group — role=radiogroup](../assets/moni-button-group/role--radiogroup.png)
+
+### `label`
+
+Una etiqueta accesible para el grupo (`aria-label`).
+
+![moni-button-group — label=default](../assets/moni-button-group/label--default.png)
+
+### `labelled-by`
+
+ID de un elemento que etiqueta este grupo (`aria-labelledby`).
+
+![moni-button-group — labelled-by=default](../assets/moni-button-group/labelledBy--default.png)

package/docs/components/button-segment.md

@@ -0,0 +1,171 @@
+# Button Segment
+
+Componente Material Design 3 Segmented Button (Heredado).
+
+**Aviso de obsolescencia:** La especificación M3 (`m3-docs/components/segmented-buttons/overview.md`)
+ha reemplazado el componente a medida "segmented button" con botones estándar organizados
+en un grupo "conectado". Por favor usa `<moni-button-group variant="connected">`
+conteniendo elementos `<moni-button>` estándar en lugar de este componente.
+
+Este componente permanece por compatibilidad hacia atrás pero será eliminado en una
+futura versión mayor. Renderiza un segmento único dentro de un `<moni-segmented-button>`.
+
+- Tag: `moni-button-segment`
+- Clase: `MoniButtonSegment`
+- Fuente: `src/components/moni-button-segment.ts`
+
+## Cuándo usarlo
+
+Usa `moni-button-segment` cuando la interfaz necesite el patrón que describe este componente. Antes de elegirlo, revisa sus estados, contenido permitido y comportamiento accesible; las capturas del final muestran el resultado real de cada variante.
+
+## Uso básico
+
+```html
+<!-- Uso heredado (no recomendado) -->
+<moni-segmented-button>
+  <moni-button-segment value="day" checked>Día</moni-button-segment>
+  <moni-button-segment value="week">Semana</moni-button-segment>
+</moni-segmented-button>
+```
+
+## Ejemplo práctico con Tailwind CSS v4
+
+Tailwind controla composición, ancho, espaciado y responsividad alrededor del Web Component. Moni UI conserva el aspecto interno mediante Shadow DOM y design tokens.
+
+```html
+<div class="mx-auto flex w-full max-w-md flex-col gap-4 p-6">
+  <moni-button-segment></moni-button-segment>
+</div>
+```
+
+No necesitas un plugin de Tailwind. En tu CSS v4 importa ambas capas una sola vez:
+
+```css
+@import "tailwindcss";
+@import "@moni-labs/moni-ui/styles";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses selectores Tailwind para asumir acceso al DOM interno; personaliza únicamente con los CSS Parts y Custom Properties públicos enumerados más abajo.
+
+## Recomendaciones
+
+- Usa `moni-button-segment` para su propósito semántico; no lo sustituyas por un `div` estilizado.
+- Aplica Tailwind al layout exterior. Para el interior del Shadow DOM usa las variables CSS y `::part()` documentados.
+- Durante una operación asíncrona combina el estado `loading` —si existe— con `disabled` para evitar envíos duplicados.
+- En formularios controlados, sincroniza la propiedad `value` y escucha el evento documentado; no dependas solo del atributo inicial.
+- Prueba los estados claro, oscuro, foco por teclado, deshabilitado y viewport móvil antes de publicar.
+
+## Propiedades y atributos
+
+| Atributo | Propiedad | Tipo | Default | Descripción |
+|---|---|---|---|---|
+| `value` | `value` | `string` | `'on'` | Valor asociado con el segmento, usado por el grupo padre. |
+| `checked` | `checked` | `boolean` | `false` | Estado seleccionado del segmento. |
+| `size` | `size` | `'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'extra'` | `'small'` | Tamaño del segmento (usualmente heredado del botón segmentado padre). |
+| `disabled` | `disabled` | `boolean` | `false` | Deshabilita el segmento. |
+| `position` | `position` | `'first' \| 'middle' \| 'last' \| 'solo'` | `'solo'` | Índice posicional del segmento dentro del grupo. Determina la lógica de redondeo del border-radius. |
+| `hide-check` | `hideCheck` | `boolean` | `false` | Si es verdadero, oculta el icono de marca de verificación que normalmente reemplaza al icono inicial cuando se selecciona. |
+
+## Slots
+
+- `default`: El texto de la etiqueta del segmento.
+
+## Eventos
+
+No declara eventos propios.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+- `checkmark`: Parte interna personalizable.
+- `label`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--_segment-gap`
+- `--_segment-height`
+- `--_segment-icon`
+- `--_segment-padding`
+- `--_segment-square-radius`
+- `--ease-standard`
+- `--moni-button-segment-gap`
+- `--moni-button-segment-radius-left`
+- `--moni-button-segment-radius-middle`
+- `--moni-button-segment-radius-right`
+- `--on-secondary-container`
+- `--on-surface`
+- `--outline`
+- `--outline-variant`
+- `--secondary-container`
+- `--speed2`
+- `--surface-container-high`
+
+## Referencia visual por variable
+
+Cada imagen se genera con el componente real: cambia solo la variable indicada y mantiene estable el resto del escenario. Úsala para comparar estados, no como sustituto de la API.
+
+### `value`
+
+Valor asociado con el segmento, usado por el grupo padre.
+
+![moni-button-segment — value=default](../assets/moni-button-segment/value--default.png)
+
+### `checked`
+
+Estado seleccionado del segmento.
+
+![moni-button-segment — checked=false](../assets/moni-button-segment/checked--false.png)
+
+![moni-button-segment — checked=true](../assets/moni-button-segment/checked--true.png)
+
+### `size`
+
+Tamaño del segmento (usualmente heredado del botón segmentado padre).
+
+![moni-button-segment — size=xsmall](../assets/moni-button-segment/size--xsmall.png)
+
+![moni-button-segment — size=small](../assets/moni-button-segment/size--small.png)
+
+![moni-button-segment — size=medium](../assets/moni-button-segment/size--medium.png)
+
+![moni-button-segment — size=large](../assets/moni-button-segment/size--large.png)
+
+![moni-button-segment — size=xlarge](../assets/moni-button-segment/size--xlarge.png)
+
+![moni-button-segment — size=extra](../assets/moni-button-segment/size--extra.png)
+
+### `disabled`
+
+Deshabilita el segmento.
+
+![moni-button-segment — disabled=false](../assets/moni-button-segment/disabled--false.png)
+
+![moni-button-segment — disabled=true](../assets/moni-button-segment/disabled--true.png)
+
+### `position`
+
+Índice posicional del segmento dentro del grupo.
+Determina la lógica de redondeo del border-radius.
+
+![moni-button-segment — position=first](../assets/moni-button-segment/position--first.png)
+
+![moni-button-segment — position=middle](../assets/moni-button-segment/position--middle.png)
+
+![moni-button-segment — position=last](../assets/moni-button-segment/position--last.png)
+
+![moni-button-segment — position=solo](../assets/moni-button-segment/position--solo.png)
+
+### `hide-check`
+
+Si es verdadero, oculta el icono de marca de verificación que normalmente reemplaza al icono inicial cuando se selecciona.
+
+![moni-button-segment — hide-check=false](../assets/moni-button-segment/hideCheck--false.png)
+
+![moni-button-segment — hide-check=true](../assets/moni-button-segment/hideCheck--true.png)