@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/cjs/sui-form-hint_3.cjs.entry.js

@@ -0,0 +1,322 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiToque = require('./sui-toque-TviBCJ0g.js');
+var enfocables = require('./enfocables-BhbuiUOA.js');
+
+const suiFormHintCss = () => `@charset "UTF-8";.sc-sui-form-hint-h{display:block;font-family:var(--sui-font-sans)}.sc-sui-form-hint-h:not([data-sui-has-message]){display:none}.sui-form-hint.sc-sui-form-hint{display:inline-flex;align-items:flex-start;gap:4px;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing)}.sc-sui-form-hint-h:not([data-sui-variant]) .sui-form-hint.sc-sui-form-hint,[data-sui-variant=neutral].sc-sui-form-hint-h .sui-form-hint.sc-sui-form-hint{color:var(--sui-text-sub-600)}[data-sui-variant=error].sc-sui-form-hint-h .sui-form-hint.sc-sui-form-hint{color:var(--sui-state-error-base)}[data-sui-variant=disabled].sc-sui-form-hint-h .sui-form-hint.sc-sui-form-hint{color:var(--sui-text-disabled-300)}.sui-form-hint__icon.sc-sui-form-hint{flex-shrink:0}.sc-sui-form-hint-h:not([data-sui-variant]) .sui-form-hint__icon.sc-sui-form-hint,[data-sui-variant=neutral].sc-sui-form-hint-h .sui-form-hint__icon.sc-sui-form-hint{color:var(--sui-icon-soft-400)}`;
+
+const SuiFormHint = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Mensaje del hint. Si es null/vacío, no renderiza nada (y el host no reserva caja). */
+        this.message = null;
+        /** Variante visual (color + icono default). Default `neutral`. */
+        this.variant = 'neutral';
+    }
+    /** Resolved icon: undefined → default by variant, null → no icon, string → that icon. */
+    get resolvedIcon() {
+        const custom = this.icon;
+        if (custom === null)
+            return null; // explicit null → no icon
+        if (typeof custom === 'string')
+            return custom; // explicit string → use it
+        return SuiFormHint.defaultIcons[this.variant]; // undefined → variant default
+    }
+    /** Normaliza message a string no-vacío o null. */
+    get hasMessage() {
+        return !!this.message;
+    }
+    render() {
+        const icon = this.resolvedIcon;
+        return (index.h(index.Host, { key: 'ac6a73a5eef44d878cf599ebfddd9cb03f8ad285', "data-sui-variant": this.variant, "data-sui-has-message": this.hasMessage ? '' : null, role: this.variant === 'error' && this.hasMessage ? 'alert' : null }, this.hasMessage && (index.h("span", { key: '56888baaf5de8100efd94e7131bdaf74246a6ada', class: "sui-form-hint" }, icon && index.h("sui-icon", { key: 'fdf351bb8a7e5c124bf25d315bfaf35cc17d49fb', name: icon, size: 16, class: "sui-form-hint__icon" }), index.h("span", { key: '11a4da4256daa9b4d7a15f62f524b4944ed4e5bb', class: "sui-form-hint__text" }, this.message)))));
+    }
+};
+/** Default icons per variant. */
+SuiFormHint.defaultIcons = {
+    neutral: null,
+    error: 'information-fill',
+    // Figma node 266:5284 (Hint Text State=Disabled) SÍ renderiza el icono
+    // `information-fill` (variante rellena), solo coloreado --text/disabled-300.
+    disabled: 'information-fill',
+};
+SuiFormHint.style = suiFormHintCss();
+
+const suiFormLabelCss = () => `@charset "UTF-8";.sc-sui-form-label-h{display:block;font-family:var(--sui-font-sans)}.sui-form-label__main.sc-sui-form-label{display:flex;align-items:center;gap:1px;cursor:default;user-select:none}[data-sui-size=xsmall].sc-sui-form-label-h .sui-form-label__main.sc-sui-form-label{font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing)}[data-sui-size=small].sc-sui-form-label-h .sui-form-label__main.sc-sui-form-label{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)}[data-sui-size=medium].sc-sui-form-label-h .sui-form-label__main.sc-sui-form-label,.sc-sui-form-label-h:not([data-sui-size]) .sui-form-label__main.sc-sui-form-label{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)}.sui-form-label__text.sc-sui-form-label{color:var(--sui-text-strong-950)}.sui-form-label__required.sc-sui-form-label{color:var(--sui-state-error-base)}.sui-form-label__sublabel.sc-sui-form-label{color:var(--sui-text-sub-600);font-weight:400}.sui-form-label__info.sc-sui-form-label{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--sui-icon-disabled-300);cursor:pointer;border-radius:2px;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);line-height:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-size:0}.sui-form-label__info.sc-sui-form-label:hover:not(:disabled){color:var(--sui-icon-sub-600)}.sui-form-label__info.sc-sui-form-label:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-form-label__info.sc-sui-form-label:disabled{cursor:not-allowed}.sui-form-label__link.sc-sui-form-label{margin-left:auto;flex-shrink:0}.sc-sui-form-label-h sui-tooltip.sc-sui-form-label{display:inline-flex;align-items:center}[data-sui-disabled].sc-sui-form-label-h .sui-form-label__main.sc-sui-form-label{cursor:not-allowed}[data-sui-disabled].sc-sui-form-label-h .sui-form-label__text.sc-sui-form-label,[data-sui-disabled].sc-sui-form-label-h .sui-form-label__sublabel.sc-sui-form-label,[data-sui-disabled].sc-sui-form-label-h .sui-form-label__required.sc-sui-form-label{color:var(--sui-text-disabled-300)}[data-sui-disabled].sc-sui-form-label-h .sui-form-label__info.sc-sui-form-label{color:var(--sui-icon-disabled-300);cursor:not-allowed}`;
+
+const SuiFormLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.linkClick = index.createEvent(this, "linkClick");
+        /** Sublabel opcional (texto secundario pequeño después del label principal). */
+        this.sublabel = null;
+        /** Marca como requerido — muestra asterisco al final del label principal. */
+        this.required = false;
+        /** Tooltip opcional sobre un icono info (ℹ) al final del label. */
+        this.tooltip = null;
+        /**
+         * Link de acción a la derecha (variante "Button" de Figma, ej. "Help?").
+         * String = solo label (emite `linkClick`); objeto `{ label, href?, target?, rel? }`
+         * = `<a>` real (rel automático `noopener noreferrer` con target=_blank).
+         * Si null/vacío, no se renderiza el link.
+         */
+        this.link = null;
+        /** Tamaño visual — matchea al field que acompaña. Default `medium`. */
+        this.size = 'medium';
+        /** Atenúa todo el label (estado Disabled de Figma). Default `false`. */
+        this.disabled = false;
+        /** ID del field controlado (para accesibilidad `for` attribute). */
+        this.htmlFor = null;
+        /** stopPropagation: el click del link no activa el <label> contenedor. */
+        this.onLinkClick = (event) => {
+            event.stopPropagation();
+            if (this.disabled)
+                return;
+            this.linkClick.emit(event.detail);
+        };
+    }
+    /** Config resuelta del link (string → { label }, rel automático para _blank). */
+    get linkCfg() {
+        var _a;
+        const l = this.link;
+        if (!l)
+            return null;
+        const cfg = typeof l === 'string' ? { label: l } : l;
+        if (!cfg.label)
+            return null;
+        return Object.assign(Object.assign({}, cfg), { rel: (_a = cfg.rel) !== null && _a !== void 0 ? _a : (cfg.target === '_blank' ? 'noopener noreferrer' : undefined) });
+    }
+    componentDidLoad() {
+        // Strip native `title` attr del host — evita el tooltip nativo gris del
+        // browser tras ~1.5s de hover (patrón canon Ontop — ver CLAUDE.md).
+        if (this.el.hasAttribute('title')) {
+            this.el.removeAttribute('title');
+        }
+    }
+    /* iOS `:active` del botón info: listeners PASIVOS en el host (utils/sui-toque.ts). */
+    alTocar() { }
+    alSoltar(event) {
+        suiToque.soltarToque(event, '.sui-form-label__info');
+    }
+    renderInfoButton() {
+        return (index.h("button", { type: "button", class: "sui-form-label__info", disabled: this.disabled, "aria-label": this.tooltip }, index.h("sui-icon", { name: "info-custom-fill", size: 20 })));
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const hasTooltip = !!this.tooltip;
+        const link = this.linkCfg;
+        return (index.h(index.Host, { key: '0d7d257778b4bfebfa97bf860f56a1cd6af5ded9', "data-sui-size": this.size, "data-sui-disabled": this.disabled ? '' : null }, index.h("label", { key: 'f8786d96895048cadecfeb8c8b2519f7034fe45a', htmlFor: (_a = this.htmlFor) !== null && _a !== void 0 ? _a : undefined, class: "sui-form-label__main" }, index.h("span", { key: '9a34d58407cafe071ba30b93612e6259856aaa9b', class: "sui-form-label__text" }, this.label), this.required && (index.h("span", { key: 'ab1da96a29e1b6fdce3a3c153152ef7f16c39b92', class: "sui-form-label__required", "aria-hidden": "true" }, "*")), this.sublabel && index.h("span", { key: 'b331f11ae884518ffc8c9d51ccb84e34229c1d46', class: "sui-form-label__sublabel" }, this.sublabel), hasTooltip &&
+            (this.disabled ? (
+            // Disabled: sin tooltip activo, solo el botón gris no interactivo.
+            this.renderInfoButton()) : (index.h("sui-tooltip", { content: this.tooltip, position: "top" }, this.renderInfoButton()))), link && (index.h("sui-link-button", { key: '26211375d071a44c9e4446af6daf8e16556d2539', class: "sui-form-label__link", variant: "gray", size: "small", disabled: this.disabled, href: (_b = link.href) !== null && _b !== void 0 ? _b : null, target: (_c = link.target) !== null && _c !== void 0 ? _c : null, rel: (_d = link.rel) !== null && _d !== void 0 ? _d : null, onClicked: this.onLinkClick }, link.label)))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiFormLabel.style = suiFormLabelCss();
+
+const suiTooltipCss = () => `@charset "UTF-8";.sc-sui-tooltip-h{position:relative;display:inline-block}.sui-tooltip__trigger.sc-sui-tooltip{display:contents}.sui-tooltip.sc-sui-tooltip{position:absolute;z-index:9999;display:block;width:max-content;--sui-tooltip-shadow:var(--sui-shadow-medium);opacity:0;transform:translateY(4px);transition:opacity var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, ease-out), transform var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, ease-out);pointer-events:none}.sui-tooltip[data-sui-position=right].sc-sui-tooltip,.sui-tooltip[data-sui-position=left].sc-sui-tooltip{transform:translateX(4px)}.sui-tooltip--visible.sc-sui-tooltip{opacity:1;transform:translateY(0)}.sui-tooltip--visible[data-sui-position=right].sc-sui-tooltip,.sui-tooltip--visible[data-sui-position=left].sc-sui-tooltip{transform:translateX(0)}.sui-tooltip[data-sui-position=top].sc-sui-tooltip{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px)}.sui-tooltip--visible[data-sui-position=top].sc-sui-tooltip{transform:translateX(-50%) translateY(0)}.sui-tooltip[data-sui-position=top-start].sc-sui-tooltip{bottom:calc(100% + 8px);left:0}.sui-tooltip[data-sui-position=top-end].sc-sui-tooltip{bottom:calc(100% + 8px);right:0}.sui-tooltip[data-sui-position=bottom].sc-sui-tooltip{top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px)}.sui-tooltip--visible[data-sui-position=bottom].sc-sui-tooltip{transform:translateX(-50%) translateY(0)}.sui-tooltip[data-sui-position=bottom-start].sc-sui-tooltip{top:calc(100% + 8px);left:0}.sui-tooltip[data-sui-position=bottom-end].sc-sui-tooltip{top:calc(100% + 8px);right:0}.sui-tooltip[data-sui-position=right].sc-sui-tooltip{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px)}.sui-tooltip--visible[data-sui-position=right].sc-sui-tooltip{transform:translateY(-50%) translateX(0)}.sui-tooltip[data-sui-position=left].sc-sui-tooltip{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px)}.sui-tooltip--visible[data-sui-position=left].sc-sui-tooltip{transform:translateY(-50%) translateX(0)}.sui-tooltip__box.sc-sui-tooltip{position:relative;font-family:var(--sui-font-sans, "Inter", sans-serif);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;white-space:normal;overflow-wrap:break-word;word-break:break-word;box-sizing:border-box;box-shadow:var(--sui-tooltip-shadow)}.sui-tooltip[data-sui-size=small].sc-sui-tooltip .sui-tooltip__box.sc-sui-tooltip{padding:2px 6px;border-radius:var(--sui-radius-4, 4px);max-width:200px}.sui-tooltip[data-sui-size=medium].sc-sui-tooltip .sui-tooltip__box.sc-sui-tooltip{padding:4px 10px;border-radius:var(--sui-radius-6, 6px);max-width:280px}.sui-tooltip[data-sui-size=large].sc-sui-tooltip .sui-tooltip__box.sc-sui-tooltip{display:flex;align-items:flex-start;gap:12px;width:280px;padding:12px;border-radius:var(--sui-radius-12, 12px)}.sui-tooltip[data-sui-size=xlarge].sc-sui-tooltip .sui-tooltip__box.sc-sui-tooltip{display:flex;align-items:flex-start;gap:14px;width:320px;padding:14px;border-radius:var(--sui-radius-16, 16px)}.sui-tooltip[data-sui-dismissible].sc-sui-tooltip .sui-tooltip__box.sc-sui-tooltip{pointer-events:auto}.sui-tooltip__icon.sc-sui-tooltip{flex-shrink:0;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}.sui-tooltip[data-sui-theme=light].sc-sui-tooltip .sui-tooltip__icon.sc-sui-tooltip{color:var(--sui-neutral-600, #5c5c5c)}.sui-tooltip[data-sui-theme=dark].sc-sui-tooltip .sui-tooltip__icon.sc-sui-tooltip{color:var(--sui-neutral-400, #a3a3a3)}.sui-tooltip[data-sui-size=xlarge].sc-sui-tooltip .sui-tooltip__icon.sc-sui-tooltip{width:24px;height:24px}.sui-tooltip__content.sc-sui-tooltip{display:flex;flex-direction:column;flex:1 0 0;min-width:0;gap:4px}.sui-tooltip__title.sc-sui-tooltip,.sui-tooltip__description.sc-sui-tooltip{margin:0;font-family:var(--sui-font-sans, "Inter", sans-serif);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;white-space:normal;overflow-wrap:break-word;word-break:break-word}.sui-tooltip__title.sc-sui-tooltip{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.006em}.sui-tooltip__description.sc-sui-tooltip{font-size:12px;font-weight:400;line-height:16px}.sui-tooltip[data-sui-size=xlarge].sc-sui-tooltip .sui-tooltip__title.sc-sui-tooltip{font-size:16px;line-height:24px}.sui-tooltip[data-sui-size=xlarge].sc-sui-tooltip .sui-tooltip__description.sc-sui-tooltip{font-size:14px;line-height:20px}.sui-tooltip[data-sui-theme=light].sc-sui-tooltip .sui-tooltip__title.sc-sui-tooltip{color:var(--sui-static-black, #171717)}.sui-tooltip[data-sui-theme=light].sc-sui-tooltip .sui-tooltip__description.sc-sui-tooltip{color:var(--sui-neutral-600, #5c5c5c)}.sui-tooltip[data-sui-theme=dark].sc-sui-tooltip .sui-tooltip__title.sc-sui-tooltip{color:var(--sui-static-white, #fff)}.sui-tooltip[data-sui-theme=dark].sc-sui-tooltip .sui-tooltip__description.sc-sui-tooltip{color:var(--sui-neutral-400, #a3a3a3)}.sui-tooltip__dismiss.sc-sui-tooltip{flex-shrink:0;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;border-radius:var(--sui-radius-6, 6px);cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease-out), color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease-out)}.sui-tooltip[data-sui-theme=light].sc-sui-tooltip .sui-tooltip__dismiss.sc-sui-tooltip{color:var(--sui-neutral-600, #5c5c5c)}.sui-tooltip[data-sui-theme=dark].sc-sui-tooltip .sui-tooltip__dismiss.sc-sui-tooltip{color:var(--sui-neutral-400, #a3a3a3)}.sui-tooltip[data-sui-theme=light].sc-sui-tooltip .sui-tooltip__dismiss.sc-sui-tooltip:hover{background:var(--sui-neutral-50, #f7f7f7);color:var(--sui-static-black, #171717)}.sui-tooltip[data-sui-theme=dark].sc-sui-tooltip .sui-tooltip__dismiss.sc-sui-tooltip:hover{background:rgba(255, 255, 255, 0.12);color:var(--sui-static-white, #fff)}.sui-tooltip__dismiss.sc-sui-tooltip:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff), 0 0 0 4px var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843))}.sui-tooltip[data-sui-theme=light].sc-sui-tooltip .sui-tooltip__box.sc-sui-tooltip{background:var(--sui-static-white, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-tooltip[data-sui-theme=dark].sc-sui-tooltip .sui-tooltip__box.sc-sui-tooltip{background:var(--sui-static-black, #171717);border:none}.sui-tooltip__text.sc-sui-tooltip{display:block;font-style:normal;white-space:normal;overflow-wrap:break-word;word-break:break-word}.sui-tooltip[data-sui-size=small].sc-sui-tooltip .sui-tooltip__text.sc-sui-tooltip{font-size:12px;font-weight:400;line-height:16px}.sui-tooltip[data-sui-size=medium].sc-sui-tooltip .sui-tooltip__text.sc-sui-tooltip{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.006em}.sui-tooltip[data-sui-theme=light].sc-sui-tooltip .sui-tooltip__text.sc-sui-tooltip{color:var(--sui-static-black, #171717)}.sui-tooltip[data-sui-theme=dark].sc-sui-tooltip .sui-tooltip__text.sc-sui-tooltip{color:var(--sui-static-white, #fff)}.sui-tooltip__arrow.sc-sui-tooltip{position:absolute;width:12px;height:6px;pointer-events:none;box-sizing:border-box}.sui-tooltip__arrow.sc-sui-tooltip::before{content:"";position:absolute;inset:-1px -1px 0 -1px;background:var(--sui-stroke-soft-200, #ebebeb);clip-path:polygon(50% 0, 100% 100%, 0 100%)}.sui-tooltip__arrow.sc-sui-tooltip::after{content:"";position:absolute;inset:0;background:var(--sui-bg-white-0, #fff);clip-path:polygon(50% 0, 100% 100%, 0 100%)}.sui-tooltip[data-sui-size=small].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{width:8px;height:4px}.sui-tooltip[data-sui-size=medium].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-size=large].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-size=xlarge].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{width:12px;height:6px}.sui-tooltip[data-sui-theme=light].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip::after{background:var(--sui-static-white, #fff)}.sui-tooltip[data-sui-theme=light].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip::before{background:var(--sui-stroke-soft-200, #ebebeb)}.sui-tooltip[data-sui-theme=dark].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip::after{background:var(--sui-static-black, #171717)}.sui-tooltip[data-sui-theme=dark].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip::before{background:var(--sui-static-black, #171717)}.sui-tooltip[data-sui-position=top].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-position=top-start].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-position=top-end].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{bottom:-5px;transform:rotate(180deg)}.sui-tooltip[data-sui-size=small][data-sui-position=top].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-size=small][data-sui-position=top-start].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-size=small][data-sui-position=top-end].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{bottom:-3px}.sui-tooltip[data-sui-position=top].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{left:50%;margin-left:-6px}.sui-tooltip[data-sui-position=top-start].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{left:16px}.sui-tooltip[data-sui-position=top-end].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{right:16px}.sui-tooltip[data-sui-size=small][data-sui-position=top].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{margin-left:-4px}.sui-tooltip[data-sui-size=small][data-sui-position=top-start].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{left:8px}.sui-tooltip[data-sui-size=small][data-sui-position=top-end].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{right:8px}.sui-tooltip[data-sui-position=bottom].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-position=bottom-start].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-position=bottom-end].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{top:-5px;transform:rotate(0deg)}.sui-tooltip[data-sui-size=small][data-sui-position=bottom].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-size=small][data-sui-position=bottom-start].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip,.sui-tooltip[data-sui-size=small][data-sui-position=bottom-end].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{top:-3px}.sui-tooltip[data-sui-position=bottom].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{left:50%;margin-left:-6px}.sui-tooltip[data-sui-position=bottom-start].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{left:16px}.sui-tooltip[data-sui-position=bottom-end].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{right:16px}.sui-tooltip[data-sui-size=small][data-sui-position=bottom].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{margin-left:-4px}.sui-tooltip[data-sui-size=small][data-sui-position=bottom-start].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{left:8px}.sui-tooltip[data-sui-size=small][data-sui-position=bottom-end].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{right:8px}.sui-tooltip[data-sui-position=right].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{left:-9px;top:50%;margin-top:-3px;transform:rotate(-90deg)}.sui-tooltip[data-sui-size=small][data-sui-position=right].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{left:-6px;margin-top:-2px}.sui-tooltip[data-sui-position=left].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{right:-9px;top:50%;margin-top:-3px;transform:rotate(90deg)}.sui-tooltip[data-sui-size=small][data-sui-position=left].sc-sui-tooltip .sui-tooltip__arrow.sc-sui-tooltip{right:-6px;margin-top:-2px}@media (prefers-reduced-motion: reduce){.sui-tooltip.sc-sui-tooltip{transition:none}}`;
+
+const SuiTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.suiDismiss = index.createEvent(this, "suiDismiss");
+        /** Texto del tooltip (text-only en size small/medium). */
+        this.content = '';
+        /**
+         * Activa el variant Large (popover rico: icon + title + description + dismiss).
+         * Equivale a presencia de `suiTooltipLarge` en el Angular. También se activa
+         * implícitamente cuando `size='large'`.
+         */
+        this.large = false;
+        /** Título del Large (Label/Small Medium 14/20 -0.006em). Solo en Large. */
+        this.titleText = null;
+        /** Descripción del Large (Paragraph/X-Small Regular 12/16). Solo en Large. */
+        this.description = null;
+        /** RemixIcon name del leading icon (20×20). Solo en Large. */
+        this.icon = null;
+        /**
+         * Si true (solo Large), el tooltip se vuelve PERSISTENTE: no auto-hide en
+         * mouseleave/blur, solo cierra via X click o Escape (UX tipo popover).
+         * Renderea el dismiss button.
+         */
+        this.dismissible = false;
+        /** Placement relativo al trigger. Default `top`. */
+        this.position = 'top';
+        /** Tamaño visual. Default `medium`. */
+        this.size = 'medium';
+        /** Color theme. Default `light`. */
+        this.theme = 'light';
+        /** Delay en ms antes de mostrar (mouseenter/focus). Default 200. */
+        this.delay = 200;
+        /** Deshabilita el tooltip por completo. Default `false`. */
+        this.disabled = false;
+        /** Muestra el arrow/tail indicador. Default `true`. */
+        this.showArrow = true;
+        /** Visibilidad real del panel (post-delay). */
+        this.visible = false;
+        /** Posición efectiva — puede flippear si el panel se sale del viewport. */
+        this.activePosition = 'top';
+        /** Id único para aria-describedby. */
+        this.panelId = `sui-tooltip-${Math.random().toString(36).slice(2, 8)}`;
+        this.showTimer = null;
+        /** Elemento al que se le puso `aria-describedby` (el trigger enfocable). */
+        this.describedEl = null;
+        this.onDismissClick = (e) => {
+            e.stopPropagation();
+            this.suiDismiss.emit();
+            this.hide();
+        };
+    }
+    /* ── Lifecycle ── */
+    componentDidLoad() {
+        this.activePosition = this.position;
+        // Strip native `title` attr del host — evita el tooltip nativo gris del
+        // browser tras ~1.5s de hover. Patrón canon Ontop (ver CLAUDE.md).
+        if (this.el.hasAttribute('title')) {
+            this.el.removeAttribute('title');
+        }
+    }
+    disconnectedCallback() {
+        this.clearTimer();
+    }
+    /* Si `disabled` flipa a true mientras está visible, ocultar de inmediato. */
+    onDisabledChange(isDisabled) {
+        if (isDisabled && this.visible) {
+            this.hide();
+        }
+    }
+    /* ── Event handlers (delegados desde el host wrapper) ── */
+    onMouseEnter() {
+        this.scheduleShow();
+    }
+    onMouseLeave() {
+        if (!this.isPersistent())
+            this.hide();
+    }
+    /* focusin/out (en vez de focus/blur) burbujean — capturan focus de cualquier
+       hijo focusable proyectado en el slot. */
+    onFocusIn() {
+        this.scheduleShow();
+    }
+    onFocusOut() {
+        if (!this.isPersistent())
+            this.hide();
+    }
+    onDocumentKeydown(e) {
+        if (e.key === 'Escape' && this.visible)
+            this.hide();
+    }
+    /* CDK usaba scrollStrategy.close(); replicado con un listener cap-phase global:
+       cierra el tooltip on scroll desde cualquier profundidad del DOM. */
+    onAnyScroll() {
+        if (this.visible)
+            this.hide();
+    }
+    /* ── Show / Hide ── */
+    scheduleShow() {
+        if (this.disabled || !this.hasContent())
+            return;
+        this.clearTimer();
+        this.showTimer = setTimeout(() => this.show(), this.delay);
+    }
+    /** True si hay contenido para renderear (text simple O datos Large). */
+    hasContent() {
+        if (this.isLarge())
+            return !!this.titleText || !!this.description || !!this.icon;
+        return !!this.content;
+    }
+    /** Renderear como Large cuando `large` o size large/xlarge. */
+    isLarge() {
+        return this.large || this.size === 'large' || this.size === 'xlarge';
+    }
+    /** True si Large con dismissible — persistente, no auto-hide. */
+    isPersistent() {
+        return this.isLarge() && this.dismissible;
+    }
+    /** Size efectivo: Large fuerza `large`, salvo que se pida `xlarge` explícito. */
+    effectiveSize() {
+        if (!this.isLarge())
+            return this.size;
+        return this.size === 'xlarge' ? 'xlarge' : 'large';
+    }
+    /** `auto` → contraste invertido con el tema de la página. */
+    resolveTheme() {
+        if (this.theme !== 'auto')
+            return this.theme;
+        return document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+    }
+    show() {
+        var _a, _b;
+        if (this.visible)
+            return;
+        this.activePosition = this.position;
+        this.visible = true;
+        /* aria-describedby va en lo que recibe el foco (el trigger del slot), no en
+           el wrapper: el lector de pantalla lee la descripción del elemento enfocado. */
+        const trigger = this.triggerEl;
+        this.describedEl = (_b = (_a = trigger === null || trigger === void 0 ? void 0 : trigger.querySelector(enfocables.ENFOCABLES)) !== null && _a !== void 0 ? _a : trigger === null || trigger === void 0 ? void 0 : trigger.firstElementChild) !== null && _b !== void 0 ? _b : this.el;
+        this.describedEl.setAttribute('aria-describedby', this.panelId);
+        // Auto-flip + enter animation tras montar el panel.
+        requestAnimationFrame(() => {
+            this.flipIfClipped();
+            if (this.panelEl)
+                this.panelEl.classList.add('sui-tooltip--visible');
+        });
+    }
+    hide() {
+        var _a;
+        this.clearTimer();
+        this.visible = false;
+        (_a = this.describedEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-describedby');
+        this.describedEl = null;
+    }
+    clearTimer() {
+        if (this.showTimer !== null) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+    }
+    /**
+     * Auto-flip: si el panel se sale del viewport en su posición primaria, voltea
+     * al lado opuesto. Replica las fallback positions del CDK (que probaba primary
+     * → flip). Solo un nivel de flip por eje, suficiente para los 8 placements.
+     */
+    flipIfClipped() {
+        if (!this.panelEl || !this.triggerEl)
+            return;
+        const r = this.panelEl.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        let pos = this.activePosition;
+        if (pos.startsWith('top') && r.top < 0) {
+            pos = pos.replace('top', 'bottom');
+        }
+        else if (pos.startsWith('bottom') && r.bottom > vh) {
+            pos = pos.replace('bottom', 'top');
+        }
+        else if (pos === 'right' && r.right > vw) {
+            pos = 'left';
+        }
+        else if (pos === 'left' && r.left < 0) {
+            pos = 'right';
+        }
+        if (pos !== this.activePosition)
+            this.activePosition = pos;
+    }
+    render() {
+        const showPanel = this.visible && this.hasContent() && !this.disabled;
+        const size = this.effectiveSize();
+        return (index.h(index.Host, { key: '2766a1d7e5dddaf6fe3f62fb78101c035b1b0586', "data-sui-has-tooltip": "", "data-sui-disabled": this.disabled ? '' : null }, index.h("span", { key: 'abc1c5e4b5c902728967b72e9184066f67226970', class: "sui-tooltip__trigger", ref: (el) => (this.triggerEl = el) }, index.h("slot", { key: '107f83dc6fd8ed372413586f111b7e96c307ab52' })), showPanel && (index.h("div", { key: '329cdc2faf811fa59b7bc397e66df57c62ec52c5', id: this.panelId, role: "tooltip", class: "sui-tooltip", ref: (el) => (this.panelEl = el), "data-sui-position": this.activePosition, "data-sui-size": size, "data-sui-theme": this.resolveTheme(), "data-sui-dismissible": this.isPersistent() ? '' : null }, size === 'large' || size === 'xlarge' ? (index.h("div", { class: "sui-tooltip__box sui-tooltip__box--large" }, this.icon && (index.h("sui-icon", { class: "sui-tooltip__icon", name: this.icon, size: size === 'xlarge' ? 24 : 20 })), index.h("div", { class: "sui-tooltip__content" }, this.titleText && index.h("p", { class: "sui-tooltip__title" }, this.titleText), this.description && (index.h("p", { class: "sui-tooltip__description" }, this.description))), this.dismissible && (index.h("button", { type: "button", class: "sui-tooltip__dismiss", "aria-label": "Cerrar", onClick: this.onDismissClick }, index.h("sui-icon", { name: "close-line", size: 20 }))), this.showArrow && (index.h("div", { class: "sui-tooltip__arrow", "aria-hidden": "true" })))) : (index.h("div", { class: "sui-tooltip__box" }, index.h("span", { class: "sui-tooltip__text" }, this.content), this.showArrow && (index.h("div", { class: "sui-tooltip__arrow", "aria-hidden": "true" }))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+SuiTooltip.style = suiTooltipCss();
+
+exports.sui_form_hint = SuiFormHint;
+exports.sui_form_label = SuiFormLabel;
+exports.sui_tooltip = SuiTooltip;

package/dist/cjs/sui-href-BNQgPKnK.js

@@ -0,0 +1,56 @@
+'use strict';
+
+/**
+ * SUI Href — SUI Design System 2.0 (port de la directiva Angular `a[suiHref]`).
+ *
+ * En Stencil no hay directivas ni Router, así que el contrato vive en una
+ * función que cada componente del DS llama desde el `onClick` de su `<a>`:
+ *
+ *   <a href={this.href} target={this.target} onClick={(ev) => suiHrefClick(ev, this.href)}>
+ *
+ * Diferencia con Angular: en vez de `router.navigateByUrl(href)` se despacha el
+ * evento cancelable `suiNavigate` (bubbles + composed, `detail: { href }`). El
+ * router de la app lo escucha y llama `preventDefault()`; recién ahí se cancela
+ * el click y no hay recarga. Si nadie lo escucha, el link se comporta como un
+ * `<a href>` común (= el passthrough "sin Router" del Angular).
+ *
+ *   document.addEventListener('suiNavigate', (e) => {
+ *     e.preventDefault();
+ *     router.navigateByUrl(e.detail.href);
+ *   });
+ *
+ * Mismas guardas que el Angular: solo URLs internas (`/x`, no `//host`), sin
+ * `target` distinto de `_self`, click primario sin cmd/ctrl/shift/alt, y evento
+ * no prevenido antes.
+ */
+/** Nombre del evento que pide la navegación SPA. */
+const SUI_NAVIGATE_EVENT = 'suiNavigate';
+/**
+ * Intercepta el click de un `<a>` del DS. Devuelve `true` si la navegación la
+ * tomó el router de la app (click cancelado), `false` si sigue el default del
+ * navegador.
+ */
+function suiHrefClick(ev, href) {
+    if (!href || !href.startsWith('/') || href.startsWith('//'))
+        return false;
+    const a = ev.currentTarget;
+    const target = a === null || a === void 0 ? void 0 : a.getAttribute('target');
+    if (target && target !== '_self')
+        return false;
+    if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+        return false;
+    const nav = new CustomEvent(SUI_NAVIGATE_EVENT, {
+        detail: { href },
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+    });
+    (a !== null && a !== void 0 ? a : document).dispatchEvent(nav);
+    if (!nav.defaultPrevented)
+        return false;
+    ev.preventDefault();
+    return true;
+}
+
+exports.SUI_NAVIGATE_EVENT = SUI_NAVIGATE_EVENT;
+exports.suiHrefClick = suiHrefClick;

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const SUI_CUSTOM_ICONS = {
+    // info-custom-fill (Figma node 125:279): círculo relleno con "i" SERIF tipográfica.
+    // NO es ri-information-fill (i recta). viewBox -4.5 -4.5 24 24 = vector 15u con
+    // padding 18.75% → a size=20 el vector queda ~12.5px centrado (igual que Figma).
+    'info-custom-fill': {
+        viewBox: '-4.5 -4.5 24 24',
+        path: 'M7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15ZM8.83901 11.3503L8.95878 10.8607C8.89678 10.8898 8.79684 10.9231 8.65979 10.961C8.52236 10.9988 8.39868 11.0181 8.28998 11.0181C8.05844 11.0181 7.89542 10.9802 7.80078 10.9039C7.70683 10.8276 7.65997 10.6841 7.65997 10.4739C7.65997 10.3906 7.6741 10.2665 7.70368 10.104C7.73233 9.94048 7.76529 9.79513 7.80193 9.668L8.24903 8.0851C8.29282 7.93984 8.32285 7.78013 8.33899 7.60582C8.3555 7.4319 8.36319 7.31021 8.36319 7.24115C8.36319 6.90737 8.24619 6.6365 8.01212 6.42754C7.77804 6.21874 7.44472 6.11435 7.01275 6.11435C6.77238 6.11435 6.51826 6.15706 6.24931 6.24241C5.98036 6.32752 5.6992 6.43008 5.40505 6.54984L5.28498 7.03981C5.37263 7.00739 5.47703 6.97251 5.59918 6.9364C5.72078 6.90045 5.84009 6.88186 5.95616 6.88186C6.19315 6.88186 6.35279 6.92227 6.43645 7.00186C6.5201 7.08167 6.56212 7.22364 6.56212 7.4266C6.56212 7.53883 6.54883 7.66351 6.52126 7.79902C6.49406 7.93538 6.46011 8.07957 6.42016 8.23176L5.97114 9.82102C5.9312 9.98803 5.902 10.1374 5.88364 10.2701C5.86544 10.4026 5.85668 10.5327 5.85668 10.6591C5.85668 10.9858 5.97736 11.255 6.21866 11.4675C6.45995 11.6792 6.79827 11.7857 7.23323 11.7857C7.51647 11.7857 7.76506 11.7487 7.97901 11.6742C8.19272 11.6 8.47972 11.4921 8.83901 11.3503ZM8.75935 4.92024C8.96823 4.72658 9.07216 4.49105 9.07216 4.21526C9.07216 3.94009 8.96838 3.70409 8.75935 3.50797C8.55101 3.31239 8.29989 3.21429 8.00628 3.21429C7.71175 3.21429 7.45962 3.31216 7.24929 3.50797C7.03895 3.70409 6.93355 3.94001 6.93355 4.21526C6.93355 4.49105 7.03895 4.7265 7.24929 4.92024C7.46 5.1146 7.71167 5.21186 8.00628 5.21186C8.29996 5.21186 8.55101 5.1146 8.75935 4.92024Z',
+    },
+    // avatar-placeholder (silueta humana): fallback final del sui-avatar. Path EXACTO
+    // del SVG inline previo (NO ri-user-fill, que difiere). viewBox 24×24, currentColor.
+    'avatar-placeholder': {
+        viewBox: '0 0 24 24',
+        path: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-8 2-8 6v1h16v-1c0-4-4-6-8-6Z',
+    },
+    // building-skyline: placeholder Empty del Image Upload Profile type=Company
+    // (Figma 253:6939). Silueta compuesta de 2 torres + ventanas. El asset DS es un
+    // SVG raster de 13 nodos; este path es la aproximación vectorial más fiel sin
+    // inlinear el raster (más cercana que el RemixIcon building-2-fill de una línea).
+    // viewBox 24×24, currentColor. Torre izquierda (más baja) + torre derecha (alta,
+    // grid de ventanas 2col × 4row recortado por las contraformas evenodd).
+    'building-skyline': {
+        viewBox: '0 0 24 24',
+        path: 'M3 9h7v12H3V9Zm1.75 2v2h1.5v-2h-1.5Zm0 4v2h1.5v-2h-1.5Zm2.5-4v2h1.5v-2h-1.5Zm0 4v2h1.5v-2h-1.5ZM11 3h10v18H11V3Zm2 3v2h2V6h-2Zm4 0v2h2V6h-2Zm-4 4v2h2v-2h-2Zm4 0v2h2v-2h-2Zm-4 4v2h2v-2h-2Zm4 0v2h2v-2h-2Zm-4 4v3h2v-3h-2Zm4 0v3h2v-3h-2Z',
+    },
+    'heart-half-fill': {
+        viewBox: '-2.5 -3.126 20 20',
+        path: 'M10.875 0C9.7 0 8.44375 0.557263 7.50625 1.49021C6.56875 0.557263 5.3 0 4.125 0C1.8125 0 0 1.95981 0 4.47063C0 6.68716 1.025 8.76594 3.05 10.6631C4.5 12.0219 6.0875 12.9548 7.1875 13.5935L7.54375 13.75L7.85625 13.5684C8.84375 12.9924 10.5 12.0219 11.95 10.6631C13.975 8.7722 15 6.68716 15 4.47063C15 1.92224 13.225 0 10.875 0ZM11.1 9.74271C9.9 10.8698 8.53125 11.69 7.50625 12.2974C7.54375 10.563 7.53125 5.5288 7.50625 3.23714L8.38125 2.37933C8.65 2.11635 9.6125 1.25228 10.875 1.25228C12.5125 1.25228 13.75 2.63604 13.75 4.47063C13.75 6.30521 12.8562 8.09597 11.1 9.74271Z',
+    },
+};
+
+const suiIconCss = () => `.sc-sui-icon-h{display:inline-flex;align-items:center;justify-content:center;line-height:1}i.sc-sui-icon{display:inline-flex;align-items:center;justify-content:center}svg.sc-sui-icon{display:block}`;
+
+const SuiIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Tamaño en px (number) o cualquier valor CSS (string). Default: 20. */
+        this.size = 20;
+        /** Valor CSS de color. Default: '' → hereda (currentColor). Preferir tokens `--sui-icon-*`. */
+        this.color = '';
+    }
+    /** SVG custom del DS si `name` está registrado; null → cae a RemixIcon font. */
+    get customIcon() {
+        var _a;
+        return (_a = SUI_CUSTOM_ICONS[this.name]) !== null && _a !== void 0 ? _a : null;
+    }
+    /** Clase del font RemixIcon. */
+    get iconClass() {
+        return `ri-${this.name}`;
+    }
+    /** Normaliza size: number → 'Npx', string → tal cual. */
+    get sizeValue() {
+        return typeof this.size === 'number' ? `${this.size}px` : this.size;
+    }
+    render() {
+        const ci = this.customIcon;
+        if (ci) {
+            return (index.h("svg", { viewBox: ci.viewBox, style: {
+                    width: this.sizeValue,
+                    height: this.sizeValue,
+                    color: this.color || undefined,
+                }, fill: "none", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: ci.path, fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd" })));
+        }
+        return (index.h("i", { class: this.iconClass, style: {
+                fontSize: this.sizeValue,
+                color: this.color || undefined,
+                lineHeight: this.sizeValue,
+            }, "aria-hidden": "true" }));
+    }
+};
+SuiIcon.style = suiIconCss();
+
+exports.sui_icon = SuiIcon;

package/dist/cjs/sui-image-upload-profile.cjs.entry.js

@@ -0,0 +1,141 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiImageUploadProfileCss = () => `@charset "UTF-8";.sc-sui-image-upload-profile-h{display:flex;align-items:flex-start;gap:20px}[data-sui-alignment=horizontal].sc-sui-image-upload-profile-h{align-items:center}[data-sui-disabled].sc-sui-image-upload-profile-h{cursor:not-allowed}[data-sui-disabled].sc-sui-image-upload-profile-h .sui-iup__avatar.sc-sui-image-upload-profile{opacity:0.5}.sui-iup__avatar.sc-sui-image-upload-profile{flex-shrink:0}.sui-iup__content.sc-sui-image-upload-profile{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}.sui-iup__text.sc-sui-image-upload-profile{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.sui-iup__title.sc-sui-image-upload-profile{font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);color:var(--sui-text-strong-950);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-iup__subtitle.sc-sui-image-upload-profile{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-sub-600);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-iup__actions.sc-sui-image-upload-profile{display:flex;flex-direction:row;align-items:center;gap:12px}`;
+
+const SuiImageUploadProfile = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.upload = index.createEvent(this, "upload");
+        this.remove = index.createEvent(this, "remove");
+        this.imageChange = index.createEvent(this, "imageChange");
+        /**
+         * URL/dataURL de la imagen actual. null/'' → estado Empty. Es la fuente
+         * controlada del value (equivale al value del CVA Angular).
+         */
+        this.imageUrl = null;
+        /**
+         * URL del logo de empresa (type=company). Si se pasa, fuerza el estado
+         * Uploaded en Company aunque `imageUrl` sea null.
+         */
+        this.companyLogoSrc = null;
+        /**
+         * Título (Label/Medium). Renombrado desde el `title` del Angular: `title` es
+         * un @Prop reservado del DOM (dispara tooltip nativo). En HTML el atributo es
+         * `heading`. Solo se muestra en alignment=vertical. Si null, «Subir imagen».
+         */
+        this.heading = null;
+        /** Subtítulo (Paragraph/Small). Solo en alignment=vertical. Si null, «Mín. 400x400px, PNG o JPEG». */
+        this.subtitle = null;
+        /**
+         * vertical (texto + avatar 64) | horizontal (avatar 56, sin texto).
+         * Default `vertical`.
+         */
+        this.alignment = 'vertical';
+        /** avatar (silueta humana) | company (silueta edificios). Default `avatar`. */
+        this.type = 'avatar';
+        /** Copy de los botones (i18n): objeto parcial `{ upload?, remove?, change? }`; lo no seteado cae al default (Subir / Eliminar / Cambiar). */
+        this.labels = {};
+        /** Deshabilita los botones (no se puede interactuar). Default `false`. */
+        this.disabled = false;
+        /** Estado de carga (botones deshabilitados mientras sube). Default `false`. */
+        this.loading = false;
+        /**
+         * Mirror interno: tras presionar "Eliminar" el value mostrado se limpia a null
+         * aunque el prop `imageUrl` siga apuntando a la URL vieja (equivale al
+         * `_formValue.set(null)` del CVA Angular). Un `imageUrl` nuevo lo resetea.
+         */
+        this.cleared = false;
+        this.onUpload = () => {
+            if (this.isDisabled)
+                return;
+            this.upload.emit();
+        };
+        this.onRemove = () => {
+            if (this.isDisabled)
+                return;
+            /* Limpia el value mostrado: tras remove el control queda en estado Empty. */
+            this.cleared = true;
+            this.remove.emit();
+        };
+        this.onChange = () => {
+            if (this.isDisabled)
+                return;
+            this.imageChange.emit();
+        };
+    }
+    /* Sin tooltip nativo gris: `title` en el Host del JSX no borra el atributo que
+       puso el consumer (el vdom no lo tenía), así que se quita a mano. */
+    componentWillLoad() {
+        this.el.removeAttribute('title');
+    }
+    /** Reset del mirror `cleared` cuando llega un `imageUrl` nuevo (re-upload). */
+    resetCleared() {
+        if (this.cleared)
+            this.cleared = false;
+    }
+    /** Imagen efectiva: null si se limpió con "Eliminar", sino el prop. */
+    get resolvedImage() {
+        return this.cleared ? null : this.imageUrl || null;
+    }
+    /** Disabled efectivo: prop `disabled` o `loading`. */
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
+    /**
+     * Empty cuando no hay imagen ni logo de empresa; Uploaded cuando hay alguno.
+     * (Company puede estar Uploaded por `companyLogoSrc` aunque `imageUrl` sea null.)
+     */
+    get state() {
+        return this.resolvedImage || (!this.cleared && this.companyLogoSrc) ? 'uploaded' : 'empty';
+    }
+    /** Src que se pasa al avatar: logo de empresa (Company) o imagen (Avatar). */
+    get avatarSrc() {
+        if (this.type === 'company') {
+            return (this.cleared ? null : this.companyLogoSrc) || this.resolvedImage;
+        }
+        return this.resolvedImage;
+    }
+    /** vertical → avatar 64px (3xl); horizontal → 56px (2xl). */
+    get avatarSize() {
+        return this.alignment === 'horizontal' ? '2xl' : '3xl';
+    }
+    /**
+     * Company empty → silueta de edificios (icono custom DS `building-skyline`);
+     * Avatar empty → silueta humana (null → fallback default del avatar).
+     */
+    get placeholderIcon() {
+        return this.type === 'company' ? 'building-skyline' : null;
+    }
+    /** El bloque de texto solo se muestra en vertical (horizontal es solo botones). */
+    get showText() {
+        return this.alignment === 'vertical';
+    }
+    /** Labels resueltas: `labels` > default en español (tuteo). */
+    get labelsCfg() {
+        var _a, _b, _c, _d;
+        const l = (_a = this.labels) !== null && _a !== void 0 ? _a : {};
+        return {
+            upload: (_b = l.upload) !== null && _b !== void 0 ? _b : 'Subir',
+            remove: (_c = l.remove) !== null && _c !== void 0 ? _c : 'Eliminar',
+            change: (_d = l.change) !== null && _d !== void 0 ? _d : 'Cambiar',
+        };
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const state = this.state;
+        const labels = this.labelsCfg;
+        const heading = (_a = this.heading) !== null && _a !== void 0 ? _a : 'Subir imagen';
+        return (index.h(index.Host, { key: 'ea08954d4022b1da2cee904e8a941bf4cabbacc5', "data-sui-alignment": this.alignment, "data-sui-type": this.type, "data-sui-state": state, "data-sui-disabled": this.isDisabled ? '' : undefined, "data-sui-loading": this.loading ? '' : undefined }, index.h("sui-avatar", { key: '73127581bc106cf25b560496b84bfb1600e6b8d7', class: "sui-iup__avatar", size: this.avatarSize, color: "gray", src: (_b = this.avatarSrc) !== null && _b !== void 0 ? _b : undefined, icon: (_c = this.placeholderIcon) !== null && _c !== void 0 ? _c : undefined, alt: heading }), index.h("div", { key: '1a95ee33b3be22a37d366dc68138178e987ac8d2', class: "sui-iup__content" }, this.showText && (index.h("div", { key: '052b86c958902fa5b52f9abb150b73e8b3162225', class: "sui-iup__text" }, index.h("span", { key: 'd751e2858e1dccd222355589e7523a9feb3fb575', class: "sui-iup__title" }, heading), index.h("span", { key: '84c58e819d55ed37c8fc938a001335e7d4029425', class: "sui-iup__subtitle" }, (_d = this.subtitle) !== null && _d !== void 0 ? _d : 'Mín. 400x400px, PNG o JPEG'))), state === 'empty' ? (index.h("div", { class: "sui-iup__actions" }, index.h("sui-button", { variant: "stroke", color: "neutral", size: "xsmall", disabled: this.isDisabled, onClick: this.onUpload }, labels.upload))) : (index.h("div", { class: "sui-iup__actions" }, index.h("sui-button", { variant: "stroke", color: "error", size: "xsmall", disabled: this.isDisabled, onClick: this.onRemove }, labels.remove), index.h("sui-button", { variant: "stroke", color: "neutral", size: "xsmall", disabled: this.isDisabled, onClick: this.onChange }, labels.change))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "imageUrl": [{
+                "resetCleared": 0
+            }]
+    }; }
+};
+SuiImageUploadProfile.style = suiImageUploadProfileCss();
+
+exports.sui_image_upload_profile = SuiImageUploadProfile;