@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/cjs/sui-rating.cjs.entry.js

@@ -0,0 +1,409 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var rovingFocus = require('./roving-focus-J_7U6aRM.js');
+var suiToque = require('./sui-toque-TviBCJ0g.js');
+var suiHref = require('./sui-href-BNQgPKnK.js');
+
+/**
+ * Tipos, catálogos y helpers de `<sui-rating>`.
+ *
+ * Vive en archivo hermano (NO en el .tsx) porque el .tsx solo puede exportar
+ * `export class` + `export type/interface` — cualquier `export const`/`function`
+ * rompe el build de Stencil entero. La lógica de derivación de cells (que el
+ * Angular tenía en un `computed`) se externaliza acá como función pura.
+ */
+/**
+ * Lista default de emojis para type='emoji' (5 caras CSAT de Fluent Emoji
+ * animado — homologado iOS/Android). Cada string es un `name` valido del
+ * catalogo SUI_EMOJI_MAP de `<sui-emoji>`.
+ */
+const SUI_RATING_DEFAULT_EMOJIS = [
+    'pensive-face',
+    'confused-face',
+    'neutral-face',
+    'slightly-smiling-face',
+    'grinning-face-smiling-eyes',
+];
+/**
+ * Deriva la vista pre-computada de cells (equivalente al `computed cells()` del
+ * Angular). Una sola pasada: resuelve fill por index considerando hover (preview),
+ * value y halfStep; asigna emoji por slot; y deriva cellState segun appearance.
+ *
+ * @param max         numero de cells
+ * @param value       value actual 0..max
+ * @param hover       indice bajo el cursor (1..max) o null
+ * @param interactive true si acepta clicks/hover (NO readonly y NO disabled)
+ * @param appearance  inline | cell | bar | bar-area
+ * @param halfStep    solo aplica en inline + readonly (half-fill por decimal)
+ * @param readonly    necesario para gatear el halfStep
+ * @param emojis      lista de emoji names por slot
+ */
+function buildRatingCells(max, value, hover, interactive, appearance, halfStep, readonly, emojis) {
+    // En interactive, el hover sobrescribe el valor pintado pero NO el real.
+    const target = interactive && hover !== null ? hover : value;
+    const half = halfStep && readonly && appearance === 'inline';
+    const isBar = appearance === 'bar' || appearance === 'bar-area';
+    const isCell = appearance === 'cell';
+    return Array.from({ length: max }, (_, i) => {
+        var _a, _b;
+        const idx = i + 1; // 1..max
+        let fill;
+        if (target >= idx) {
+            fill = 'full';
+        }
+        else if (half && target >= idx - 0.5) {
+            fill = 'half';
+        }
+        else {
+            fill = 'empty';
+        }
+        let cellState = 'default';
+        if (isBar) {
+            if (value === idx) {
+                cellState = 'selected';
+            }
+            else if (interactive && hover === idx) {
+                cellState = 'hover';
+            }
+        }
+        else if (isCell) {
+            // En 'cell' selected NO cambia el chrome; solo el hover individual aplica bg weak-50.
+            if (interactive && hover === idx) {
+                cellState = 'hover';
+            }
+        }
+        return {
+            index: idx,
+            fill,
+            cellState,
+            emoji: (_b = (_a = emojis[i]) !== null && _a !== void 0 ? _a : emojis[emojis.length - 1]) !== null && _b !== void 0 ? _b : 'slightly-smiling-face',
+        };
+    });
+}
+/**
+ * Map del fill al icon name de Remix (star/heart). Consistencia de familia:
+ * heart-3-line (outline) <-> heart-3-fill (relleno) usan el MISMO corazon.
+ */
+function ratingIconName(type, fill) {
+    const map = {
+        star: { empty: 'star-line', half: 'star-half-fill', full: 'star-fill' },
+        heart: { empty: 'heart-3-line', half: 'heart-half-fill', full: 'heart-3-fill' },
+    };
+    if (type === 'emoji' || type === 'number')
+        return '';
+    return map[type][fill];
+}
+/**
+ * Icon name para una celda de bar/bar-area segun su estado visual (Figma 535:4535).
+ * HOVER ("Empty Filled") y SELECTED ("Full") comparten el mismo relleno solido
+ * (star-fill / heart-3-fill); la diferencia es SOLO de color (la maneja el SCSS).
+ * DEFAULT usa el outline (star-line / heart-3-line).
+ */
+function ratingBarIconName(type, cellState) {
+    if (type === 'emoji' || type === 'number')
+        return '';
+    const fill = cellState === 'default' ? 'empty' : 'full';
+    return ratingIconName(type, fill);
+}
+/** Tamaño del icon en px para inline/cell (bar usa 20 hardcoded). */
+function ratingIconPx(appearance, size) {
+    if (appearance === 'cell')
+        return 32;
+    switch (size) {
+        case 'small':
+            return 16;
+        case 'large':
+            return 24;
+        case 'xlarge':
+            return 28;
+        case '2xlarge':
+            return 32;
+        default:
+            return 20;
+    }
+}
+/** Formato user-facing del rating value: "4.5" sin trailing zeros. */
+function ratingValueLabel(value) {
+    if (Number.isInteger(value))
+        return String(value);
+    return value.toFixed(1).replace(/\.0$/, '');
+}
+/** Formato corto del review count: 1234 -> "1.2K", 5200 -> "5.2K", 950 -> "950". */
+function ratingReviewCountLabel(n) {
+    if (n === null || n === undefined)
+        return null;
+    if (n < 1000)
+        return String(n);
+    if (n < 1000000)
+        return `${(n / 1000).toFixed(1).replace(/\.0$/, '')}K`;
+    return `${(n / 1000000).toFixed(1).replace(/\.0$/, '')}M`;
+}
+
+const suiRatingCss = () => `@charset "UTF-8";.sc-sui-rating-h{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}[data-disabled].sc-sui-rating-h{opacity:0.5;pointer-events:none}[data-appearance=inline][data-alignment=inline].sc-sui-rating-h{flex-direction:row;flex-wrap:nowrap}[data-appearance=inline][data-alignment=vertical].sc-sui-rating-h{flex-direction:column;align-items:flex-start;gap:8px}[data-appearance=inline][data-alignment=horizontal].sc-sui-rating-h{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons.sc-sui-rating{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon.sc-sui-rating{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}[data-type=star].sc-sui-rating-h .sui-rating__icon[data-fill=full].sc-sui-rating,[data-type=star].sc-sui-rating-h .sui-rating__icon[data-fill=half].sc-sui-rating{color:var(--sui-yellow-500, #f6b51e)}[data-type=heart].sc-sui-rating-h .sui-rating__icon[data-fill=full].sc-sui-rating,[data-type=heart].sc-sui-rating-h .sui-rating__icon[data-fill=half].sc-sui-rating{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon.sc-sui-rating{cursor:pointer;border-radius:4px}button.sui-rating__icon.sc-sui-rating:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta.sc-sui-rating{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical.sc-sui-rating{align-self:flex-start}.sui-rating__value.sc-sui-rating,.sui-rating__count.sc-sui-rating{font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;white-space:nowrap}.sui-rating__sep.sc-sui-rating{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link.sc-sui-rating{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link.sc-sui-rating:hover{color:var(--sui-text-strong-950)}.sui-rating__link.sc-sui-rating:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}[data-appearance=cell].sc-sui-rating-h{display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells.sc-sui-rating{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}[data-appearance=cell].sc-sui-rating-h .sui-rating__icon.sc-sui-rating{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), border-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), box-shadow var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}[data-appearance=cell].sc-sui-rating-h .sui-rating__icon[data-cell-state=hover].sc-sui-rating{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}[data-appearance=bar].sc-sui-rating-h{display:inline-block;align-items:stretch}[data-appearance=bar-area].sc-sui-rating-h{display:block;width:100%}.sui-rating__bar.sc-sui-rating{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}[data-appearance=bar-area].sc-sui-rating-h .sui-rating__bar.sc-sui-rating{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell.sc-sui-rating{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell.sc-sui-rating:first-child{border-left:0}[data-appearance=bar-area].sc-sui-rating-h .sui-rating__bar-cell.sc-sui-rating{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell.sc-sui-rating{cursor:pointer}button.sui-rating__bar-cell.sc-sui-rating:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}[data-type=star].sc-sui-rating-h .sui-rating__bar-cell[data-cell-state=selected].sc-sui-rating{color:var(--sui-yellow-500, #f6b51e)}[data-type=heart].sc-sui-rating-h .sui-rating__bar-cell[data-cell-state=selected].sc-sui-rating{color:var(--sui-state-error-base, #fb3748)}[data-type=number].sc-sui-rating-h .sui-rating__bar-cell[data-cell-state=hover].sc-sui-rating .sui-rating__number.sc-sui-rating,[data-type=number].sc-sui-rating-h .sui-rating__bar-cell[data-cell-state=selected].sc-sui-rating .sui-rating__number.sc-sui-rating{color:var(--sui-text-strong-950)}[data-type=number].sc-sui-rating-h .sui-rating__bar-cell[data-cell-state=selected].sc-sui-rating,[data-type=emoji].sc-sui-rating-h .sui-rating__bar-cell[data-cell-state=selected].sc-sui-rating{background:var(--sui-bg-weak-50)}.sui-rating__number.sc-sui-rating{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-rating__emoji.sc-sui-rating{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(0.5);opacity:0.55;transition:filter var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), opacity var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}[data-type=emoji].sc-sui-rating-h .sui-rating__bar-cell[data-cell-state=selected].sc-sui-rating .sui-rating__emoji.sc-sui-rating{filter:grayscale(0);opacity:1}.sui-rating__area.sc-sui-rating{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input.sc-sui-rating{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea.sc-sui-rating{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-rating__area-textarea.sc-sui-rating::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea.sc-sui-rating:focus-visible{outline:none}.sui-rating__area-text.sc-sui-rating{width:100%;min-height:72px;margin:0;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-rating__area-text--placeholder.sc-sui-rating{color:var(--sui-text-soft-400)}[data-appearance=inline][data-size="2xlarge"].sc-sui-rating-h,[data-appearance=inline][data-size="2xlarge"].sc-sui-rating-h .sui-rating__icons.sc-sui-rating{gap:0}[data-appearance=inline][data-alignment=vertical][data-size="2xlarge"].sc-sui-rating-h,[data-appearance=inline][data-alignment=horizontal][data-size="2xlarge"].sc-sui-rating-h{gap:8px}[data-appearance=inline][data-size="2xlarge"].sc-sui-rating-h .sui-rating__icon.sc-sui-rating{box-sizing:border-box;width:44px;height:44px;padding:6px}[data-size="2xlarge"].sc-sui-rating-h .sui-rating__bar-cell.sc-sui-rating{min-height:44px;padding:12px 4px}[data-size="2xlarge"].sc-sui-rating-h .sui-rating__number.sc-sui-rating{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em)}`;
+
+const SuiRating = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.reasonChange = index.createEvent(this, "reasonChange");
+        /** Apariencia. Default `inline`. */
+        this.appearance = 'inline';
+        /** Tipo visual. Default `star`. emoji/number solo aplican en bar/bar-area. */
+        this.type = 'star';
+        /** Value actual 0..max (mutable, two-way via evento `valueChange`). */
+        this.value = 0;
+        /** Numero de cells. Default `5`. */
+        this.max = 5;
+        /** Tamaño del icon. Default `medium`. Ignorado en cell (32); en bar solo 2xlarge cambia la celda. */
+        this.size = 'medium';
+        /** Deshabilita clicks (display only). */
+        this.readonly = false;
+        /**
+         * Equivalente al setDisabledState del CVA Angular: deshabilita por completo
+         * (atenua + bloquea cursor) igual que readonly, pero semanticamente distinto
+         * (readonly = display intencional; disabled = el form/consumer lo apago).
+         */
+        this.disabled = false;
+        /** inline + readonly: renderiza half-fill basado en value decimal. */
+        this.halfStep = false;
+        /** inline: muestra "4.5" al lado de los iconos. */
+        this.showValue = false;
+        /** inline: muestra "5.2K Ratings" al lado (formato corto). */
+        this.reviewCount = null;
+        /** inline: link "18 reviews" al lado. Lleva objeto -> pasar como property. */
+        this.reviewLink = null;
+        /** inline: alineacion del bloque meta. Default `inline`. */
+        this.alignment = 'inline';
+        /**
+         * Lista de emoji names para type='emoji' (default: 5 caras CSAT). Cada string
+         * debe ser un `name` valido del catalogo de `<sui-emoji>`. Lleva array -> pasar
+         * como property (`el.emojis = [...]`).
+         */
+        this.emojis = SUI_RATING_DEFAULT_EMOJIS;
+        /** Nombre accesible del grupo (en Angular sale de provideSuiTextos). */
+        this.ariaLabel = 'Calificación';
+        /** bar-area: texto del reason (textarea). Mutable, two-way via `reasonChange`. */
+        this.reason = '';
+        /** bar-area: placeholder del textarea (en Angular sale de provideSuiTextos). */
+        this.reasonPlaceholder = 'Cuéntanos por qué';
+        /** bar-area: filas iniciales del textarea (el min-height lo fija el CSS = 72px). */
+        this.reasonRows = 3;
+        /** Hover preview (desktop). En mobile no se setea — touch va directo al click. */
+        this.hoverIndex = null;
+        this.onCellClick = (index) => {
+            if (!this.isInteractive)
+                return;
+            // Re-click en la celda seleccionada es no-op (no resetea a 0).
+            if (this.value === index)
+                return;
+            this.value = index;
+            this.valueChange.emit(index);
+        };
+        this.onCellEnter = (index) => {
+            if (!this.isInteractive)
+                return;
+            this.hoverIndex = index;
+        };
+        this.onCellLeave = () => {
+            if (!this.isInteractive)
+                return;
+            this.hoverIndex = null;
+        };
+        this.onReasonInput = (event) => {
+            var _a, _b;
+            const v = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+            this.reason = v;
+            this.reasonChange.emit(v);
+        };
+        /**
+         * `ariaLabel` está atado al atributo `aria-label` del host: lo que se escribe ahí
+         * vuelve al prop. Como el nombre de solo lectura es más largo que el prop
+         * («Calificación: 4,5 de 5»), escribirlo desde el render lo realimentaba y
+         * crecía sin fin. El nombre base del consumer se guarda aparte y el atributo
+         * se escribe después del render.
+         */
+        this.nombreBase = 'Calificación';
+        this.ultimoNombre = null;
+    }
+    /** Limpia el hover cuando se vuelve no-interactive (evita estado pegado). */
+    onInteractiveChange() {
+        if (!this.isInteractive)
+            this.hoverIndex = null;
+    }
+    /** True cuando acepta interaccion: NO readonly Y NO disabled. */
+    get isInteractive() {
+        return !this.readonly && !this.disabled;
+    }
+    /** Vista pre-computada de cells (delegada al helper puro del .data.ts). */
+    get cells() {
+        return buildRatingCells(this.max, this.value, this.hoverIndex, this.isInteractive, this.appearance, this.halfStep, this.readonly, this.emojis);
+    }
+    get iconPx() {
+        return ratingIconPx(this.appearance, this.size);
+    }
+    alTocar() {
+        /* presencia del listener = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    alSoltar(event) {
+        suiToque.soltarToque(event, 'button');
+    }
+    /** Índice (1..max) de la celda con tabindex 0: la elegida, o la primera. */
+    get tabStopIndex() {
+        const v = this.value;
+        return Number.isInteger(v) && v >= 1 && v <= this.max ? v : 1;
+    }
+    /**
+     * Patrón radiogroup (interactivo): ← ↑ bajan la nota, → ↓ la suben, Home/End
+     * van a 1 / max. Las flechas eligen. Sin vuelta.
+     */
+    onKeydown(event) {
+        var _a;
+        if (!this.isInteractive)
+            return;
+        const cur = this.tabStopIndex - 1;
+        const next = rovingFocus.suiRovingIndex(event.key, this.value >= 1 ? cur : -1, this.max, 'both', false);
+        if (next === null)
+            return;
+        event.preventDefault();
+        // Sin nota elegida, la primera flecha elige la 1 (no salta a la 2).
+        const target = this.value >= 1 ? next + 1 : event.key === 'End' ? this.max : 1;
+        this.onCellClick(target);
+        (_a = this.el
+            .querySelectorAll('button.sui-rating__icon, button.sui-rating__bar-cell')[target - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /** Rol del host: `img` para la nota de solo lectura (o `group` si trae link), `radiogroup` para pedirla. */
+    get hostRole() {
+        if (!this.readonly)
+            return 'radiogroup';
+        return this.reviewLink ? 'group' : 'img';
+    }
+    componentWillLoad() {
+        this.nombreBase = this.ariaLabel || 'Calificación';
+    }
+    onAriaLabelChange(v) {
+        if (v !== this.ultimoNombre)
+            this.nombreBase = v || 'Calificación';
+    }
+    componentDidRender() {
+        /* En un microtask: escribir el atributo dentro del ciclo de render cuenta
+           como «prop cambiado durante el render» (warning de Stencil). */
+        queueMicrotask(() => {
+            const nombre = this.hostAriaLabel;
+            if (this.el.getAttribute('aria-label') !== nombre) {
+                this.ultimoNombre = nombre;
+                this.el.setAttribute('aria-label', nombre);
+            }
+        });
+    }
+    /** Nombre accesible: interactivo = `ariaLabel`; readonly = «Calificación: 4,5 de 5, 120 calificaciones». */
+    get hostAriaLabel() {
+        const base = this.nombreBase;
+        if (!this.readonly)
+            return base;
+        const v = this.value;
+        const num = Number.isInteger(v) ? String(v) : v.toFixed(1).replace(/\.0$/, '').replace('.', ',');
+        const n = this.reviewCount;
+        const count = n === null || n === undefined ? '' : `, ${n} ${n === 1 ? 'calificación' : 'calificaciones'}`;
+        return `${base}: ${num} de ${this.max}${count}`;
+    }
+    /**
+     * En appearance='cell' el EMPTY es el glyph RELLENO gris (Figma Rating Cell
+     * 532:4160 «Empty Filled»), no el outline del inline.
+     */
+    cellIconName(fill) {
+        if (this.appearance === 'cell' && fill === 'empty')
+            return ratingIconName(this.type, 'full');
+        return ratingIconName(this.type, fill);
+    }
+    // ── Render helpers ────────────────────────────────────────────────────
+    /** Single icon (appearance='inline' y 'cell'). */
+    renderIconCell(cell) {
+        const ariaChecked = this.value === cell.index ? 'true' : 'false';
+        const ariaLabel = `${cell.index} de ${this.max}`;
+        if (this.readonly) {
+            return (index.h("span", { class: "sui-rating__icon", "data-fill": cell.fill, "data-cell-state": cell.cellState, "aria-hidden": "true" }, index.h("sui-icon", { name: this.cellIconName(cell.fill), size: this.iconPx })));
+        }
+        return (index.h("button", { type: "button", class: "sui-rating__icon", "data-fill": cell.fill, "data-cell-state": cell.cellState, "data-selected": this.value === cell.index ? '' : null, disabled: this.disabled, role: "radio", "aria-checked": ariaChecked, "aria-label": ariaLabel, tabindex: cell.index === this.tabStopIndex ? 0 : -1, onClick: () => this.onCellClick(cell.index), onMouseEnter: () => this.onCellEnter(cell.index), onMouseLeave: () => this.onCellLeave() }, index.h("sui-icon", { name: this.cellIconName(cell.fill === 'empty' ? 'empty' : 'full'), size: this.iconPx })));
+    }
+    /** Contenido de una cell de bar/bar-area segun type. */
+    renderCellContent(cell) {
+        if (this.type === 'emoji') {
+            /* Cinco APNG de ~1 MB en bucle traban el scroll: copia estática, como el Angular. */
+            return index.h("sui-emoji", { class: "sui-rating__emoji", name: cell.emoji, size: "sm", animated: false });
+        }
+        if (this.type === 'number') {
+            return index.h("span", { class: "sui-rating__number" }, cell.index);
+        }
+        // star | heart
+        return index.h("sui-icon", { name: ratingBarIconName(this.type, cell.cellState), size: 20 });
+    }
+    /** Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. */
+    renderBarRow() {
+        return (index.h("div", { class: "sui-rating__bar", onMouseLeave: () => this.onCellLeave() }, this.cells.map((cell) => {
+            const ariaChecked = this.value === cell.index ? 'true' : 'false';
+            const ariaLabel = `${cell.index} de ${this.max}`;
+            if (this.readonly) {
+                return (index.h("div", { class: "sui-rating__bar-cell", "data-fill": cell.fill, "data-cell-state": cell.cellState, "aria-hidden": "true" }, this.renderCellContent(cell)));
+            }
+            return (index.h("button", { type: "button", class: "sui-rating__bar-cell", "data-fill": cell.fill, "data-cell-state": cell.cellState, "data-selected": this.value === cell.index ? '' : null, disabled: this.disabled, role: "radio", "aria-checked": ariaChecked, "aria-label": ariaLabel, tabindex: cell.index === this.tabStopIndex ? 0 : -1, onClick: () => this.onCellClick(cell.index), onMouseEnter: () => this.onCellEnter(cell.index) }, this.renderCellContent(cell)));
+        })));
+    }
+    /** Meta (value + reviewCount + link), inline vertical/horizontal. */
+    renderMeta() {
+        const link = this.reviewLink;
+        return [
+            this.showValue && index.h("span", { class: "sui-rating__value" }, ratingValueLabel(this.value)),
+            this.showValue && this.reviewCount !== null && (index.h("span", { class: "sui-rating__sep", "aria-hidden": "true" }, "\u2219")),
+            this.reviewCount !== null && (index.h("span", { class: "sui-rating__count" }, ratingReviewCountLabel(this.reviewCount), " ", this.reviewCount === 1 ? 'calificación' : 'calificaciones')),
+            link &&
+                (link.href ? (index.h("a", { class: "sui-rating__link", href: link.href, onClick: (ev) => suiHref.suiHrefClick(ev, link.href) }, link.label)) : (index.h("button", { type: "button", class: "sui-rating__link" }, link.label))),
+        ];
+    }
+    renderInline() {
+        const hasMeta = this.showValue || this.reviewCount !== null || !!this.reviewLink;
+        if (this.alignment === 'vertical' || this.alignment === 'horizontal') {
+            return [
+                index.h("div", { class: "sui-rating__icons" }, this.cells.map((c) => this.renderIconCell(c))),
+                hasMeta && (index.h("div", { class: `sui-rating__meta sui-rating__meta--${this.alignment}` }, this.renderMeta())),
+            ];
+        }
+        // alignment 'inline' (default): solo los iconos bare.
+        return this.cells.map((c) => this.renderIconCell(c));
+    }
+    /** Contenido interno segun appearance (todo lo que va dentro del Host). */
+    renderInner() {
+        if (this.appearance === 'inline') {
+            return this.renderInline();
+        }
+        if (this.appearance === 'cell') {
+            return (index.h("div", { class: "sui-rating__cells", onMouseLeave: () => this.onCellLeave() }, this.cells.map((c) => this.renderIconCell(c))));
+        }
+        if (this.appearance === 'bar') {
+            return this.renderBarRow();
+        }
+        // appearance === 'bar-area'
+        return (index.h("div", { class: "sui-rating__area" }, this.renderBarRow(), index.h("div", { class: "sui-rating__area-input" }, this.readonly ? (index.h("p", { class: {
+                'sui-rating__area-text': true,
+                'sui-rating__area-text--placeholder': !this.reason,
+            } }, this.reason || this.reasonPlaceholder)) : (index.h("textarea", { class: "sui-rating__area-textarea", rows: this.reasonRows, value: this.reason, placeholder: this.reasonPlaceholder, disabled: this.disabled, "aria-label": this.reasonPlaceholder, onInput: this.onReasonInput })))));
+    }
+    render() {
+        return (index.h(index.Host, { key: '600e025b70200a406f6d31a9a978035c9092a36a', role: this.hostRole, "aria-readonly": !this.readonly && !this.isInteractive ? 'true' : null, "aria-disabled": !this.readonly && this.disabled ? 'true' : null, "data-appearance": this.appearance, "data-type": this.type, "data-size": this.size, "data-alignment": this.alignment, "data-disabled": this.disabled ? '' : null }, this.renderInner()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "readonly": [{
+                "onInteractiveChange": 0
+            }],
+        "disabled": [{
+                "onInteractiveChange": 0
+            }],
+        "ariaLabel": [{
+                "onAriaLabelChange": 0
+            }]
+    }; }
+};
+SuiRating.style = suiRatingCss();
+
+exports.sui_rating = SuiRating;

package/dist/cjs/sui-rich-editor-item.cjs.entry.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiToque = require('./sui-toque-TviBCJ0g.js');
+
+const suiRichEditorItemCss = () => `@charset "UTF-8";.sc-sui-rich-editor-item-h{display:inline-flex;border-radius:var(--sui-radius-6);box-sizing:border-box}.sui-rich-editor-item__btn.sc-sui-rich-editor-item{display:inline-flex;align-items:center;margin:0;border:none;background:var(--sui-bg-white-0);cursor:pointer;appearance:none;outline:none;box-sizing:border-box;border-radius:var(--sui-radius-6);overflow:clip;color:var(--sui-icon-sub-600);transition:background-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease), color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease)}[data-sui-type=text].sc-sui-rich-editor-item-h .sui-rich-editor-item__btn.sc-sui-rich-editor-item{gap:2px;padding:4px 4px 4px 10px}[data-sui-type=dropdown].sc-sui-rich-editor-item-h .sui-rich-editor-item__btn.sc-sui-rich-editor-item{gap:2px;padding:4px}[data-sui-type=icon].sc-sui-rich-editor-item-h .sui-rich-editor-item__btn.sc-sui-rich-editor-item{gap:0;padding:4px}[data-sui-type=color].sc-sui-rich-editor-item-h .sui-rich-editor-item__btn.sc-sui-rich-editor-item{gap:2px;padding:4px 4px 4px 8px}[data-sui-state=hover].sc-sui-rich-editor-item-h .sui-rich-editor-item__btn.sc-sui-rich-editor-item,[data-sui-state=active].sc-sui-rich-editor-item-h .sui-rich-editor-item__btn.sc-sui-rich-editor-item,[data-sui-state=default].sc-sui-rich-editor-item-h .sui-rich-editor-item__btn.sc-sui-rich-editor-item:hover{background:var(--sui-bg-weak-50)}.sui-rich-editor-item__label.sc-sui-rich-editor-item{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;color:var(--sui-text-sub-600);white-space:nowrap;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}[data-sui-state=active].sc-sui-rich-editor-item-h .sui-rich-editor-item__label.sc-sui-rich-editor-item{color:var(--sui-text-strong-950)}.sui-rich-editor-item__icon.sc-sui-rich-editor-item{display:inline-flex;flex-shrink:0;color:var(--sui-icon-sub-600)}[data-sui-state=active].sc-sui-rich-editor-item-h .sui-rich-editor-item__icon.sc-sui-rich-editor-item{color:var(--sui-primary-base)}.sui-rich-editor-item__caret.sc-sui-rich-editor-item{display:inline-flex;flex-shrink:0;color:var(--sui-icon-soft-400)}.sui-rich-editor-item__dot.sc-sui-rich-editor-item{flex-shrink:0;display:inline-block;width:16px;height:16px;border-radius:96px;background:var(--sui-neutral-500);pointer-events:none}.sui-rich-editor-item__dot[data-sui-color=gray].sc-sui-rich-editor-item{background:var(--sui-neutral-500)}.sui-rich-editor-item__dot[data-sui-color=blue].sc-sui-rich-editor-item{background:var(--sui-blue-500)}.sui-rich-editor-item__dot[data-sui-color=orange].sc-sui-rich-editor-item{background:var(--sui-orange-500)}.sui-rich-editor-item__dot[data-sui-color=red].sc-sui-rich-editor-item{background:var(--sui-red-500)}.sui-rich-editor-item__dot[data-sui-color=green].sc-sui-rich-editor-item{background:var(--sui-green-500)}.sui-rich-editor-item__dot[data-sui-color=yellow].sc-sui-rich-editor-item{background:var(--sui-yellow-500)}.sui-rich-editor-item__dot[data-sui-color=purple].sc-sui-rich-editor-item{background:var(--sui-purple-500)}.sui-rich-editor-item__dot[data-sui-color=sky].sc-sui-rich-editor-item{background:var(--sui-sky-500)}.sui-rich-editor-item__dot[data-sui-color=pink].sc-sui-rich-editor-item{background:var(--sui-pink-500)}.sui-rich-editor-item__dot[data-sui-color=teal].sc-sui-rich-editor-item{background:var(--sui-teal-500)}.sui-rich-editor-item__btn.sc-sui-rich-editor-item:active{transform:none}.sui-rich-editor-item__btn.sc-sui-rich-editor-item:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:-1px}.sui-rich-editor-item__btn.sc-sui-rich-editor-item:disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}`;
+
+const SuiRichEditorItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        /** Tipo de item. Default `icon` (caso más común en el toolbar). */
+        this.type = 'icon';
+        /** Estado visual. El padre lo setea según la selección activa del editor. Default `default`. */
+        this.state = 'default';
+        /** Label del item tipo `text` (ej. "Header", "14px"). Default `''`. */
+        this.label = '';
+        /**
+         * Nombre RemixIcon del glyph (tipos `icon` y `dropdown`). Ej. 'bold', 'italic',
+         * 'underline', 'strikethrough', 'align-left', 'chat-1-line', 'link', 'at-line',
+         * 'more-2-line'. Default `''`.
+         */
+        this.icon = '';
+        /** Color preset del dot (tipo `color`). Default `gray`. */
+        this.color = 'gray';
+        /** Hex custom del dot (tipo `color`) — override del preset. Default `null`. */
+        this.colorHex = null;
+        /** aria-label override (útil para items icon-only). Default `''`. */
+        this.ariaLabel = '';
+        /** Deshabilita el item (sin pointer events, sin emit). Default `false`. */
+        this.disabled = false;
+        this.onClick = () => {
+            if (this.disabled)
+                return;
+            this.clicked.emit();
+        };
+        /**
+         * Nombre del consumer. `ariaLabel` está atado al atributo `aria-label` del host,
+         * pero el nombre va en el `<button>` interno (lo que recibe el foco): se guarda
+         * aquí y el atributo se quita del host, que no tiene rol (un `aria-label` en un
+         * elemento genérico no se anuncia).
+         */
+        this.nombre = '';
+    }
+    /** True cuando el caret apunta hacia arriba (active en text/dropdown/color). */
+    get caretUp() {
+        return this.state === 'active';
+    }
+    /** Nombre del icono del caret según el estado. */
+    get caretIcon() {
+        return this.caretUp ? 'arrow-up-s-fill' : 'arrow-down-s-fill';
+    }
+    /** True para tipos que muestran caret (text, dropdown, color — NO icon). */
+    get hasCaret() {
+        return this.type !== 'icon';
+    }
+    /** True para mostrar el glyph principal (icon, dropdown). */
+    get hasIcon() {
+        return this.type === 'icon' || this.type === 'dropdown';
+    }
+    componentWillLoad() {
+        /* Sin title nativo en el host (tooltip gris): Host title={undefined} no lo borra. */
+        this.el.removeAttribute('title');
+        this.nombre = this.ariaLabel || '';
+        this.el.removeAttribute('aria-label');
+    }
+    onAriaLabelChange(v) {
+        /* null = lo disparó nuestro propio removeAttribute: no es un nombre nuevo. */
+        if (v === null)
+            return;
+        this.nombre = v;
+        /* En un microtask: quitar el atributo dentro del ciclo cuenta como «prop cambiado durante el render». */
+        queueMicrotask(() => this.el.removeAttribute('aria-label'));
+    }
+    /**
+     * iOS WKWebView fix: listeners PASIVOS en el host (homólogo del `SuiToque` del
+     * Angular). La presencia del touchstart engage el touch pipeline; el touchend
+     * suelta el foco del botón interno. Pasivos para no frenar el scroll.
+     */
+    alTocar() {
+        /* no-op a propósito. */
+    }
+    alSoltar(event) {
+        suiToque.soltarToque(event, '.sui-rich-editor-item__btn');
+    }
+    render() {
+        return (index.h(index.Host, { key: '6f71c61cf65458a94ff05cd0ab91830bcb7cf757', "data-sui-type": this.type, "data-sui-state": this.state }, index.h("button", { key: 'f73b88f46495863d707e3d53e0c92b61dde892be', type: "button", class: "sui-rich-editor-item__btn", "aria-label": this.nombre || this.label || this.icon || undefined, "aria-pressed": this.state === 'active' ? 'true' : undefined, disabled: this.disabled || undefined, onClick: this.onClick }, this.type === 'color' && (index.h("span", { key: 'e99d6d95e2a73a2c0a2c05ac6894948feb8b480a', class: "sui-rich-editor-item__dot", "data-sui-color": this.colorHex ? undefined : this.color, style: this.colorHex ? { background: this.colorHex } : undefined })), this.hasIcon && this.icon && (index.h("sui-icon", { key: '6e4927b25bd46c4bae1ecd8e917da97f0e1c8be5', class: "sui-rich-editor-item__icon", name: this.icon, size: 20 })), this.type === 'text' && (index.h("span", { key: '21ea62a7f0de198b0f18c69d26cd035795e4891f', class: "sui-rich-editor-item__label" }, this.label)), this.hasCaret && (index.h("sui-icon", { key: '0d05aff13b54319054d1bc99b4b75ca311d834a2', class: "sui-rich-editor-item__caret", name: this.caretIcon, size: 20 })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "ariaLabel": [{
+                "onAriaLabelChange": 0
+            }]
+    }; }
+};
+SuiRichEditorItem.style = suiRichEditorItemCss();
+
+exports.sui_rich_editor_item = SuiRichEditorItem;