@moni-labs/moni-ui 0.3.0 → 0.3.2

package/dist/components/moni-button-group.d.ts

@@ -6,70 +6,148 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Button Group component.
+ * Componente Material Design 3 Button Group.
  *
- * Organizes multiple `<moni-button>` or `<moni-icon-button>` components
- * into a single row.
+ * Organiza múltiples componentes `<moni-button>` o `<moni-icon-button>`
+ * en una sola fila.
  *
- * **Variants:**
- * - `standard` (default) — A simple flex row with a gap between buttons.
- * - `connected` — The M3 Expressive replacement for segmented buttons. In this
- *   mode, buttons share borders and form a single continuous pill shape. The
- *   group manages the single/multi-select toggle state of its children.
+ * **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.
  *
- * **`connected` variant details:**
- * - **Shape propagation:** The group automatically propagates M3 shape classes
- *   (`left-round-flat`, `no-round`, `right-round-flat`) to its children so
- *   they interlock seamlessly.
- * - **Toggle management:** The group listens to child clicks and toggles their
- *   `active` attributes. When `multi=false` (default), only one button can be
- *   active at a time (radio button behavior). When `multi=true`, multiple buttons
- *   can be active (checkbox behavior).
- * - **Event propagation:** Fires a `'change'` event when the selection changes.
+ * **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.
  *
- * **Accessibility:**
- * - Renders with `role="group"` (can be overridden to `toolbar` or `radiogroup`).
- * - Consumers should provide an `aria-label` or `aria-labelledby` attribute
- *   to identify the group's purpose to assistive technologies.
+ * **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.
  *
- * @fires change - Fired when a button is clicked in `connected` mode and the
- *                 selection state updates.
+ * @fires change - Disparado cuando se hace clic en un botón en modo `connected` y el
+ *                 estado de selección se actualiza.
  *
  * @example
  * ```html
- * <!-- Connected single-select group -->
- * <moni-button-group variant="connected" label="Alignment">
+ * <!-- 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>
  *
- * <!-- Standard button row -->
+ * <!-- Fila estándar de botones -->
  * <moni-button-group gap="1rem">
- *   <moni-button variant="text">Cancel</moni-button>
- *   <moni-button>Save</moni-button>
+ *   <moni-button variant="text">Cancelar</moni-button>
+ *   <moni-button>Guardar</moni-button>
  * </moni-button-group>
  * ```
  *
- * @slot default - The `<moni-button>` elements that make up the group.
+ * @slot default - Los elementos `<moni-button>` que conforman el grupo.
  */
 export declare class MoniButtonGroup extends MoniElement {
+    /**
+     * Variante visual del grupo de botones.
+     * - `standard`: Los elementos se espacian normalmente.
+     * - `connected`: Los elementos se unen con bordes colapsados y radios internos aplanados.
+     * @type {'standard' | 'connected'}
+     * @default 'standard'
+     */
     variant: 'standard' | 'connected';
+    /**
+     * Tamaño de los botones en el grupo. Si se especifica, se propaga hacia abajo a los hijos.
+     * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+     * @default 'medium'
+     */
     size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra';
+    /**
+     * Permite que múltiples botones estén activos a la vez (solo aplica a grupos seleccionables).
+     * @type {boolean}
+     */
     multi: boolean;
+    /**
+     * Espacio CSS personalizado entre botones (ej., '1rem').
+     * Solo se aplica cuando la variante es 'standard'.
+     * @type {string}
+     */
     gap: string;
+    /**
+     * Rol ARIA del contenedor del grupo.
+     * @type {'group' | 'toolbar' | 'radiogroup'}
+     * @default 'group'
+     */
     role: 'group' | 'toolbar' | 'radiogroup';
+    /**
+     * Una etiqueta accesible para el grupo (`aria-label`).
+     * @type {string}
+     */
     label: string;
+    /**
+     * ID de un elemento que etiqueta este grupo (`aria-labelledby`).
+     * @type {string}
+     */
     labelledBy: string;
     private slottedButtons;
     static styles: import("lit").CSSResult[];
+    /**
+     * Hook del ciclo de vida reactivo (Lit).
+     * Detecta alteraciones estructurales en el propio grupo (como `variant`, `size` o `gap`)
+     * y fuerza una re-sincronización de todos los botones hijos para aplicar las físicas CSS.
+     */
     protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Manejador del slot interno (`<slot>`).
+     * Cuando el desarrollador inyecta dinámicamente o remueve botones en runtime,
+     * re-sincroniza las formas (shapes) y tamaños de todo el listado.
+     */
     private handleSlotChange;
     private getGapValue;
+    /**
+     * Sincronizador de Propiedades (Engine interno).
+     * Itera sobre cada botón hijo para transferirle jerárquicamente las configuraciones
+     * del grupo. Si el grupo es del tipo `connected` (botones pegados), evalúa matemáticamente
+     * la posición del índice actual (primero, en medio o último) e inyecta la propiedad `shape`
+     * correspondiente (`left-round-flat`, `inner-round`, etc.) para formar una cápsula unificada.
+     */
     private updateChildren;
+    /**
+     * Maneja la interacción táctil o de mouse (Pointer Down).
+     * Genera un micro-efecto físico (Squish effect). Cuando el usuario presiona un botón
+     * dentro de un listado estándar, empuja físicamente (`scaleX` / `translateX`) a los
+     * botones adyacentes para simular presión material y desplazamiento.
+     */
     private handlePointerDown;
+    /**
+     * Conclusión de la interacción táctil (Pointer Up).
+     * Restaura todas las transformaciones elásticas aplicadas a los botones adyacentes
+     * a su estado nativo neutro.
+     */
     private handlePointerUp;
+    /**
+     * Interceptor de clics de delegación.
+     * En grupos de tipo 'segment', garantiza que solo un botón tenga la clase activa
+     * o el atributo encendido de forma excluyente, actuando como un gestor de radio-buttons.
+     */
     private handleClick;
+    /**
+     * Renders the button group container with `role="group"` semantics.
+     *
+     * The group is a flex container that distributes its slotted `<moni-button>`
+     * or `<moni-button-segment>` children in a row or column (based on `orientation`).
+     * CSS handles the shared-border collapse between adjacent segments:
+     * - Middle segments use `border-radius: 0` and `margin-inline-start: -1px`
+     *   to prevent doubled borders.
+     * - `_syncSegments()` in `firstUpdated()` injects `left-round` / `right-round`
+     *   shape attributes into the first and last children for correct pill termination.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-button-group.d.ts","sourceRoot":"","sources":["../../src/components/moni-button-group.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAE/C,OAAO,EAAE,UAAU,GAAG,WAAW,CAAc;IAG/C,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9E,KAAK,UAAS;IAGd,GAAG,SAAM;IAGT,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,YAAY,CAAW;IAGnD,KAAK,SAAM;IAGX,UAAU,SAAM;IAGhB,OAAO,CAAC,cAAc,CAAiB;IAEvC,OAAgB,MAAM,4BAuCpB;cAEiB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAOpF,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,cAAc;IA0CtB,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,WAAW;IA2CV,MAAM;CAyBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"moni-button-group.d.ts","sourceRoot":"","sources":["../../src/components/moni-button-group.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,eAAgB,SAAQ,WAAW;IAC/C;;;;;;OAMG;IAEH,OAAO,EAAE,UAAU,GAAG,WAAW,CAAc;IAE/C;;;;OAIG;IAEH,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9E;;;OAGG;IAEH,KAAK,UAAS;IAEd;;;;OAIG;IAEH,GAAG,SAAM;IAET;;;;OAIG;IAEH,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,YAAY,CAAW;IAEnD;;;OAGG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,UAAU,SAAM;IAGhB,OAAO,CAAC,cAAc,CAAiB;IAEvC,OAAgB,MAAM,4BAuCpB;IAEF;;;;OAIG;cACgB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAOpF;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,WAAW;IAWnB;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IA0CtB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IA2BzB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAUvB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IA2CnB;;;;;;;;;;OAUG;IACM,MAAM;CAyBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD;AAED,eAAe,eAAe,CAAC"}

package/dist/components/moni-button-group.js

@@ -14,62 +14,96 @@ import { html, css, nothing } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Material Design 3 Button Group component.
+ * Componente Material Design 3 Button Group.
  *
- * Organizes multiple `<moni-button>` or `<moni-icon-button>` components
- * into a single row.
+ * Organiza múltiples componentes `<moni-button>` o `<moni-icon-button>`
+ * en una sola fila.
  *
- * **Variants:**
- * - `standard` (default) — A simple flex row with a gap between buttons.
- * - `connected` — The M3 Expressive replacement for segmented buttons. In this
- *   mode, buttons share borders and form a single continuous pill shape. The
- *   group manages the single/multi-select toggle state of its children.
+ * **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.
  *
- * **`connected` variant details:**
- * - **Shape propagation:** The group automatically propagates M3 shape classes
- *   (`left-round-flat`, `no-round`, `right-round-flat`) to its children so
- *   they interlock seamlessly.
- * - **Toggle management:** The group listens to child clicks and toggles their
- *   `active` attributes. When `multi=false` (default), only one button can be
- *   active at a time (radio button behavior). When `multi=true`, multiple buttons
- *   can be active (checkbox behavior).
- * - **Event propagation:** Fires a `'change'` event when the selection changes.
+ * **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.
  *
- * **Accessibility:**
- * - Renders with `role="group"` (can be overridden to `toolbar` or `radiogroup`).
- * - Consumers should provide an `aria-label` or `aria-labelledby` attribute
- *   to identify the group's purpose to assistive technologies.
+ * **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.
  *
- * @fires change - Fired when a button is clicked in `connected` mode and the
- *                 selection state updates.
+ * @fires change - Disparado cuando se hace clic en un botón en modo `connected` y el
+ *                 estado de selección se actualiza.
  *
  * @example
  * ```html
- * <!-- Connected single-select group -->
- * <moni-button-group variant="connected" label="Alignment">
+ * <!-- 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>
  *
- * <!-- Standard button row -->
+ * <!-- Fila estándar de botones -->
  * <moni-button-group gap="1rem">
- *   <moni-button variant="text">Cancel</moni-button>
- *   <moni-button>Save</moni-button>
+ *   <moni-button variant="text">Cancelar</moni-button>
+ *   <moni-button>Guardar</moni-button>
  * </moni-button-group>
  * ```
  *
- * @slot default - The `<moni-button>` elements that make up the group.
+ * @slot default - Los elementos `<moni-button>` que conforman el grupo.
  */
 let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Variante visual del grupo de botones.
+         * - `standard`: Los elementos se espacian normalmente.
+         * - `connected`: Los elementos se unen con bordes colapsados y radios internos aplanados.
+         * @type {'standard' | 'connected'}
+         * @default 'standard'
+         */
         this.variant = 'standard';
+        /**
+         * Tamaño de los botones en el grupo. Si se especifica, se propaga hacia abajo a los hijos.
+         * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+         * @default 'medium'
+         */
         this.size = 'medium';
+        /**
+         * Permite que múltiples botones estén activos a la vez (solo aplica a grupos seleccionables).
+         * @type {boolean}
+         */
         this.multi = false;
+        /**
+         * Espacio CSS personalizado entre botones (ej., '1rem').
+         * Solo se aplica cuando la variante es 'standard'.
+         * @type {string}
+         */
         this.gap = '';
+        /**
+         * Rol ARIA del contenedor del grupo.
+         * @type {'group' | 'toolbar' | 'radiogroup'}
+         * @default 'group'
+         */
         this.role = 'group';
+        /**
+         * Una etiqueta accesible para el grupo (`aria-label`).
+         * @type {string}
+         */
         this.label = '';
+        /**
+         * ID de un elemento que etiqueta este grupo (`aria-labelledby`).
+         * @type {string}
+         */
         this.labelledBy = '';
     }
     static { this.styles = [
@@ -112,12 +146,22 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Hook del ciclo de vida reactivo (Lit).
+     * Detecta alteraciones estructurales en el propio grupo (como `variant`, `size` o `gap`)
+     * y fuerza una re-sincronización de todos los botones hijos para aplicar las físicas CSS.
+     */
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap')) {
             this.updateChildren();
         }
     }
+    /**
+     * Manejador del slot interno (`<slot>`).
+     * Cuando el desarrollador inyecta dinámicamente o remueve botones en runtime,
+     * re-sincroniza las formas (shapes) y tamaños de todo el listado.
+     */
     handleSlotChange() {
         this.updateChildren();
     }
@@ -137,6 +181,13 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
             return '0.5rem';
         return gap;
     }
+    /**
+     * Sincronizador de Propiedades (Engine interno).
+     * Itera sobre cada botón hijo para transferirle jerárquicamente las configuraciones
+     * del grupo. Si el grupo es del tipo `connected` (botones pegados), evalúa matemáticamente
+     * la posición del índice actual (primero, en medio o último) e inyecta la propiedad `shape`
+     * correspondiente (`left-round-flat`, `inner-round`, etc.) para formar una cápsula unificada.
+     */
     updateChildren() {
         const buttons = this.slottedButtons.filter((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
         buttons.forEach((btn, index) => {
@@ -182,6 +233,12 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
             }
         });
     }
+    /**
+     * Maneja la interacción táctil o de mouse (Pointer Down).
+     * Genera un micro-efecto físico (Squish effect). Cuando el usuario presiona un botón
+     * dentro de un listado estándar, empuja físicamente (`scaleX` / `translateX`) a los
+     * botones adyacentes para simular presión material y desplazamiento.
+     */
     handlePointerDown(e) {
         if (this.variant !== 'standard')
             return;
@@ -206,6 +263,11 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
             next.style.transformOrigin = 'left center';
         }
     }
+    /**
+     * Conclusión de la interacción táctil (Pointer Up).
+     * Restaura todas las transformaciones elásticas aplicadas a los botones adyacentes
+     * a su estado nativo neutro.
+     */
     handlePointerUp() {
         const buttons = this.slottedButtons.filter((el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button');
         buttons.forEach((btn) => {
@@ -213,6 +275,11 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
             btn.style.transformOrigin = '';
         });
     }
+    /**
+     * Interceptor de clics de delegación.
+     * En grupos de tipo 'segment', garantiza que solo un botón tenga la clase activa
+     * o el atributo encendido de forma excluyente, actuando como un gestor de radio-buttons.
+     */
     handleClick(e) {
         const target = e.target;
         const clickedButton = target.closest('moni-button, moni-icon-button');
@@ -247,6 +314,17 @@ let MoniButtonGroup = class MoniButtonGroup extends MoniElement {
             }
         }));
     }
+    /**
+     * Renders the button group container with `role="group"` semantics.
+     *
+     * The group is a flex container that distributes its slotted `<moni-button>`
+     * or `<moni-button-segment>` children in a row or column (based on `orientation`).
+     * CSS handles the shared-border collapse between adjacent segments:
+     * - Middle segments use `border-radius: 0` and `margin-inline-start: -1px`
+     *   to prevent doubled borders.
+     * - `_syncSegments()` in `firstUpdated()` injects `left-round` / `right-round`
+     *   shape attributes into the first and last children for correct pill termination.
+     */
     render() {
         const resolvedGap = this.getGapValue(this.gap);
         const inlineStyles = resolvedGap

package/dist/components/moni-button-segment.d.ts

@@ -7,37 +7,78 @@
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Segmented Button component (Legacy).
+ * Componente Material Design 3 Segmented Button (Heredado).
  *
- * **Deprecation Notice:** The M3 spec (`m3-docs/components/segmented-buttons/overview.md`)
- * has replaced the bespoke segmented button component with standard buttons arranged
- * in a "connected" group. Please use `<moni-button-group variant="connected">`
- * containing standard `<moni-button>` elements instead of this component.
+ * **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.
  *
- * This component remains for backwards compatibility but will be removed in a
- * future major release. It renders a single segment within a `<moni-segmented-button>`.
+ * 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>`.
  *
- * @deprecated Use `<moni-button-group variant="connected">` instead.
+ * @deprecated Usa `<moni-button-group variant="connected">` en su lugar.
  *
  * @example
  * ```html
- * <!-- Legacy usage (not recommended) -->
+ * <!-- Uso heredado (no recomendado) -->
  * <moni-segmented-button>
- *   <moni-button-segment value="day" checked>Day</moni-button-segment>
- *   <moni-button-segment value="week">Week</moni-button-segment>
+ *   <moni-button-segment value="day" checked>Día</moni-button-segment>
+ *   <moni-button-segment value="week">Semana</moni-button-segment>
  * </moni-segmented-button>
  * ```
  *
- * @slot default - The segment label text.
+ * @slot default - El texto de la etiqueta del segmento.
  */
 export declare class MoniButtonSegment extends MoniElement {
+    /**
+     * Valor asociado con el segmento, usado por el grupo padre.
+     * @type {string}
+     * @default 'on'
+     */
     value: string;
+    /**
+     * Estado seleccionado del segmento.
+     * @type {boolean}
+     */
     checked: boolean;
+    /**
+     * Tamaño del segmento (usualmente heredado del botón segmentado padre).
+     * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+     * @default 'medium'
+     */
     size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra';
+    /**
+     * Deshabilita el segmento.
+     * @type {boolean}
+     */
     disabled: boolean;
+    /**
+     * Índice posicional del segmento dentro del grupo.
+     * Determina la lógica de redondeo del border-radius.
+     * @type {'first' | 'middle' | 'last' | 'solo'}
+     * @default 'solo'
+     */
     position: 'first' | 'middle' | 'last' | 'solo';
+    /**
+     * Si es verdadero, oculta el icono de marca de verificación que normalmente reemplaza al icono inicial cuando se selecciona.
+     * @type {boolean}
+     */
     hideCheck: boolean;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renders the segment as a `role="radio"` toggle button within its group.
+     *
+     * **`role="radio"` + `aria-checked`:**
+     * Per the ARIA Segmented Button pattern, each segment acts as a radio button
+     * (`role="radio"`, `aria-checked=${this.active}`) within a `role="radiogroup"`
+     * container (the parent `<moni-segmented-button>`).
+     *
+     * **Checkmark icon:**
+     * When `active=true`, a `<moni-icon name="check">` is prepended to the label
+     * to signal the selected state visually (M3 Segmented Button spec, Figure 5).
+     * This icon disappears with a `scale(0)` transition when `active=false`.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-button-segment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-button-segment.d.ts","sourceRoot":"","sources":["../../src/components/moni-button-segment.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,iBAAkB,SAAQ,WAAW;IAEjD,KAAK,SAAQ;IAGb,OAAO,UAAS;IAGhB,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9E,QAAQ,UAAS;IAGjB,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAU;IAGxD,SAAS,UAAS;IAElB,OAAgB,MAAM,4BA0OpB;IAEO,MAAM;CAWf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"moni-button-segment.d.ts","sourceRoot":"","sources":["../../src/components/moni-button-segment.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,iBAAkB,SAAQ,WAAW;IACjD;;;;OAIG;IAEH,KAAK,SAAQ;IAEb;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;;OAIG;IAEH,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9E;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;;;OAKG;IAEH,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAU;IAExD;;;OAGG;IAEH,SAAS,UAAS;IAElB,OAAgB,MAAM,4BA0OpB;IAEF;;;;;;;;;;;;OAYG;IACM,MAAM;CAWf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,iBAAiB,CAAC;KACzC;CACD;AAED,eAAe,iBAAiB,CAAC"}

package/dist/components/moni-button-segment.js

@@ -15,37 +15,65 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Segmented Button component (Legacy).
+ * Componente Material Design 3 Segmented Button (Heredado).
  *
- * **Deprecation Notice:** The M3 spec (`m3-docs/components/segmented-buttons/overview.md`)
- * has replaced the bespoke segmented button component with standard buttons arranged
- * in a "connected" group. Please use `<moni-button-group variant="connected">`
- * containing standard `<moni-button>` elements instead of this component.
+ * **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.
  *
- * This component remains for backwards compatibility but will be removed in a
- * future major release. It renders a single segment within a `<moni-segmented-button>`.
+ * 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>`.
  *
- * @deprecated Use `<moni-button-group variant="connected">` instead.
+ * @deprecated Usa `<moni-button-group variant="connected">` en su lugar.
  *
  * @example
  * ```html
- * <!-- Legacy usage (not recommended) -->
+ * <!-- Uso heredado (no recomendado) -->
  * <moni-segmented-button>
- *   <moni-button-segment value="day" checked>Day</moni-button-segment>
- *   <moni-button-segment value="week">Week</moni-button-segment>
+ *   <moni-button-segment value="day" checked>Día</moni-button-segment>
+ *   <moni-button-segment value="week">Semana</moni-button-segment>
  * </moni-segmented-button>
  * ```
  *
- * @slot default - The segment label text.
+ * @slot default - El texto de la etiqueta del segmento.
  */
 let MoniButtonSegment = class MoniButtonSegment extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Valor asociado con el segmento, usado por el grupo padre.
+         * @type {string}
+         * @default 'on'
+         */
         this.value = 'on';
+        /**
+         * Estado seleccionado del segmento.
+         * @type {boolean}
+         */
         this.checked = false;
+        /**
+         * Tamaño del segmento (usualmente heredado del botón segmentado padre).
+         * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+         * @default 'medium'
+         */
         this.size = 'medium';
+        /**
+         * Deshabilita el segmento.
+         * @type {boolean}
+         */
         this.disabled = false;
+        /**
+         * Índice posicional del segmento dentro del grupo.
+         * Determina la lógica de redondeo del border-radius.
+         * @type {'first' | 'middle' | 'last' | 'solo'}
+         * @default 'solo'
+         */
         this.position = 'solo';
+        /**
+         * Si es verdadero, oculta el icono de marca de verificación que normalmente reemplaza al icono inicial cuando se selecciona.
+         * @type {boolean}
+         */
         this.hideCheck = false;
     }
     static { this.styles = [
@@ -283,6 +311,19 @@ let MoniButtonSegment = class MoniButtonSegment extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renders the segment as a `role="radio"` toggle button within its group.
+     *
+     * **`role="radio"` + `aria-checked`:**
+     * Per the ARIA Segmented Button pattern, each segment acts as a radio button
+     * (`role="radio"`, `aria-checked=${this.active}`) within a `role="radiogroup"`
+     * container (the parent `<moni-segmented-button>`).
+     *
+     * **Checkmark icon:**
+     * When `active=true`, a `<moni-icon name="check">` is prepended to the label
+     * to signal the selected state visually (M3 Segmented Button spec, Figure 5).
+     * This icon disappears with a `scale(0)` transition when `active=false`.
+     */
     render() {
         return html `
 			<button class="button ${this.size}" type="button" ?disabled=${this.disabled}>