@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiDividerCss = () => `@charset "UTF-8";.sc-sui-divider-h{display:block;box-sizing:border-box;height:1px;width:100%;background:var(--sui-stroke-soft-200);flex-shrink:0;pointer-events:none}[data-sui-orientation=vertical].sc-sui-divider-h{display:inline-block;width:1px;height:100%;min-height:16px}`;
+
+const SuiDivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Orientación de la línea. Default `horizontal`. */
+        this.orientation = 'horizontal';
+    }
+    render() {
+        return (index.h(index.Host, { key: '02ba2c2f96259e42a921a8c49331653ac05b4337', role: "separator", "aria-orientation": this.orientation, "data-sui-orientation": this.orientation }));
+    }
+};
+SuiDivider.style = suiDividerCss();
+
+exports.sui_divider = SuiDivider;

package/dist/cjs/sui-drawer-footer.cjs.entry.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiConfigs = require('./sui-configs-W3MqDkhn.js');
+
+const suiDrawerFooterCss = () => `@charset "UTF-8";.sc-sui-drawer-footer-h{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:19px 20px 20px;background:var(--sui-bg-white-0);border-top:1px solid var(--sui-stroke-soft-200);font-family:var(--sui-font-sans, "Inter", system-ui, sans-serif);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}[data-sui-type=checkbox].sc-sui-drawer-footer-h,[data-sui-type=toggle].sc-sui-drawer-footer-h,[data-sui-type=stepper].sc-sui-drawer-footer-h,[data-sui-type=link-button].sc-sui-drawer-footer-h{gap:16px}.sui-drawer-footer__inline.sc-sui-drawer-footer{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}.sui-drawer-footer__inline-label.sc-sui-drawer-footer{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-strong-950);white-space:nowrap}.sui-drawer-footer__stepper.sc-sui-drawer-footer{flex-shrink:0;display:inline-flex;align-items:center;gap:10px}.sui-drawer-footer__dot.sc-sui-drawer-footer{width:8px;height:8px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200);transition:background-color 0.15s ease}.sui-drawer-footer__dot--active.sc-sui-drawer-footer{background:var(--sui-primary-base)}.sui-drawer-footer__actions.sc-sui-drawer-footer{display:flex;align-items:center;gap:16px}[data-sui-type=basic].sc-sui-drawer-footer-h .sui-drawer-footer__actions.sc-sui-drawer-footer,[data-sui-type=checkbox].sc-sui-drawer-footer-h .sui-drawer-footer__actions.sc-sui-drawer-footer,[data-sui-type=toggle].sc-sui-drawer-footer-h .sui-drawer-footer__actions.sc-sui-drawer-footer,[data-sui-type=stepper].sc-sui-drawer-footer-h .sui-drawer-footer__actions.sc-sui-drawer-footer,[data-sui-type=link-button].sc-sui-drawer-footer-h .sui-drawer-footer__actions.sc-sui-drawer-footer{flex:1 0 0;min-width:0;justify-content:flex-end}[data-sui-type=stretch].sc-sui-drawer-footer-h .sui-drawer-footer__actions.sc-sui-drawer-footer{flex:1 0 0;min-width:0;justify-content:stretch}[data-sui-type=stretch].sc-sui-drawer-footer-h .sui-drawer-footer__btn.sc-sui-drawer-footer{flex:1 0 0;min-width:0}[data-sui-size=large].sc-sui-drawer-footer-h .sui-drawer-footer__inline-label.sc-sui-drawer-footer{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -0.011em)}`;
+
+let siguienteId = 0;
+const SuiDrawerFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.primaryClick = index.createEvent(this, "primaryClick");
+        this.secondaryClick = index.createEvent(this, "secondaryClick");
+        this.linkClick = index.createEvent(this, "linkClick");
+        this.checkboxActiveChange = index.createEvent(this, "checkboxActiveChange");
+        this.toggleActiveChange = index.createEvent(this, "toggleActiveChange");
+        /** Variante del footer. Default `stretch`. */
+        this.type = 'stretch';
+        /** Botones del pie: `medium` 40 (default) · `large` 48 para el teléfono. */
+        this.size = 'medium';
+        /** Botón primario (filled primary) — string (solo label) o `SuiFooterButtonConfig`.
+         *  Sin pasar: «Continuar». */
+        this.primaryButton = null;
+        /** Botón secundario (stroke neutral) — string o `SuiFooterButtonConfig`.
+         *  `null` (o label vacío) lo oculta. Sin pasar: «Cancelar». */
+        this.secondaryButton = undefined;
+        // ── Type-specific props ─────────────────────────────────────────────
+        /** Label del checkbox (type='checkbox'). */
+        this.checkboxLabel = '';
+        /** Estado del checkbox (type='checkbox'). Mutable: el `model(checkboxActive)`
+         *  del Angular; emite `checkboxActiveChange` al cambiar. */
+        this.checkboxActive = false;
+        /** Label del switch (type='toggle'). */
+        this.toggleLabel = '';
+        /** Estado del switch (type='toggle'). Mutable: el `model(toggleActive)`
+         *  del Angular; emite `toggleActiveChange` al cambiar. */
+        this.toggleActive = false;
+        /** Stepper (type='stepper') — `{ current (0-indexed), total }`. `null` = 3 puntos,
+         *  el primero activo (default de Figma). */
+        this.stepper = null;
+        /** Link (type='link-button') — string (solo label, emite `linkClick`) o
+         *  `SuiLinkConfig { label, href?, target?, rel? }`. Vacío = sin link. */
+        this.link = null;
+        this.uid = `sui-drawer-footer-${++siguienteId}`;
+        this.onPrimary = (event) => {
+            if (this.primaryCfg.disabled)
+                return;
+            this.primaryClick.emit(event);
+        };
+        this.onSecondary = (event) => {
+            var _a;
+            if ((_a = this.secondaryCfg) === null || _a === void 0 ? void 0 : _a.disabled)
+                return;
+            this.secondaryClick.emit(event);
+        };
+        this.onLink = (event) => {
+            this.linkClick.emit(event.detail);
+        };
+        /** sui-checkbox emite `suiChange` con el nuevo boolean. */
+        this.onCheckbox = (event) => {
+            this.checkboxActive = event.detail;
+            this.checkboxActiveChange.emit(this.checkboxActive);
+        };
+        /** sui-switch emite `checkedChange` con el valor nuevo (patrón controlado). */
+        this.onToggle = (event) => {
+            this.toggleActive = event.detail;
+            this.toggleActiveChange.emit(this.toggleActive);
+        };
+    }
+    get primaryCfg() {
+        var _a;
+        return (_a = suiConfigs.resolverBotonPie(this.primaryButton)) !== null && _a !== void 0 ? _a : { label: 'Continuar' };
+    }
+    get secondaryCfg() {
+        const pasado = this.secondaryButton;
+        return suiConfigs.resolverBotonPie(pasado === undefined ? 'Cancelar' : pasado);
+    }
+    get stepperCfg() {
+        var _a;
+        return (_a = this.stepper) !== null && _a !== void 0 ? _a : { current: 0, total: 3 };
+    }
+    /** Array de índices para el stepper (mínimo 1 punto). */
+    get stepperIndexes() {
+        return Array.from({ length: Math.max(1, this.stepperCfg.total) }, (_, i) => i);
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        // shortcut: sui-button gana `large` en homolog/H1; en esta rama su tipo todavía no
+        // lo trae (el atributo llega igual). Al integrar H1 se quita el cast.
+        const btnSize = this.size;
+        const primary = this.primaryCfg;
+        const secondary = this.secondaryCfg;
+        const stepper = this.stepperCfg;
+        const link = this.type === 'link-button' ? suiConfigs.resolverLink(this.link) : null;
+        const checkboxLabelId = `${this.uid}-checkbox-label`;
+        const toggleLabelId = `${this.uid}-toggle-label`;
+        return (index.h(index.Host, { key: '1523555e8c4f5f6f3af2a555b1bfa87783ef15a6', "data-sui-type": this.type, "data-sui-size": this.size }, this.type === 'checkbox' && (index.h("label", { key: 'f01137e417427fbfd3c90a66721d9826f866ea03', class: "sui-drawer-footer__inline" }, index.h("sui-checkbox", { key: 'a8a77012a70c69fb64d38716ebfbe6e51b5835c0', "aria-labelledby": this.checkboxLabel ? checkboxLabelId : null, checked: this.checkboxActive, onSuiChange: this.onCheckbox }), index.h("span", { key: '2f1240be12dc3d9e97f0b7e5869eaf92aef5a9e2', class: "sui-drawer-footer__inline-label", id: checkboxLabelId }, this.checkboxLabel))), this.type === 'toggle' && (index.h("label", { key: '332322d8f264a1b76987eb0dc33ef878edeaee1b', class: "sui-drawer-footer__inline" }, index.h("sui-switch", { key: '15b8d92a40fb48c17c8f3076862f0239405a33e1', "aria-labelledby": this.toggleLabel ? toggleLabelId : null, checked: this.toggleActive, onCheckedChange: this.onToggle }), index.h("span", { key: 'c871360d9ce61e0ce39be42c09541c21144238f1', class: "sui-drawer-footer__inline-label", id: toggleLabelId }, this.toggleLabel))), this.type === 'stepper' && (index.h("div", { key: '4649e0e545e665da6bee7b81802704876f752f05', class: "sui-drawer-footer__stepper", role: "progressbar", "aria-label": "Progreso", "aria-valuemin": 1, "aria-valuemax": stepper.total, "aria-valuenow": stepper.current + 1, "aria-valuetext": `Paso ${stepper.current + 1} de ${stepper.total}` }, this.stepperIndexes.map((i) => (index.h("span", { class: {
+                'sui-drawer-footer__dot': true,
+                'sui-drawer-footer__dot--active': i === stepper.current,
+            }, "aria-hidden": "true" }))))), link && (index.h("sui-link-button", { key: 'bfb32d1c8135da8ba7198d17186d60413c4c67aa', variant: "gray", size: "medium", underline: true, href: (_a = link.href) !== null && _a !== void 0 ? _a : null, target: (_b = link.target) !== null && _b !== void 0 ? _b : null, rel: (_c = link.rel) !== null && _c !== void 0 ? _c : null, onClicked: this.onLink }, link.label)), index.h("div", { key: '6e43a88f388c9d9b097f46e402ac2ea039b12424', class: "sui-drawer-footer__actions" }, secondary && (index.h("sui-button", { key: '11971c2700034459fa246e0d5580fe44623dc260', class: "sui-drawer-footer__btn sui-drawer-footer__btn--secondary", variant: "stroke", color: "neutral", size: btnSize, disabled: (_d = secondary.disabled) !== null && _d !== void 0 ? _d : false, onClick: this.onSecondary }, secondary.label)), index.h("sui-button", { key: '13d35fdd6faec19bb54791cbf199031d71846e52', class: "sui-drawer-footer__btn sui-drawer-footer__btn--primary", variant: "filled", color: "primary", size: btnSize, disabled: (_e = primary.disabled) !== null && _e !== void 0 ? _e : false, onClick: this.onPrimary }, primary.label))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiDrawerFooter.style = suiDrawerFooterCss();
+
+exports.sui_drawer_footer = SuiDrawerFooter;

package/dist/cjs/sui-drawer-header.cjs.entry.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiConfigs = require('./sui-configs-W3MqDkhn.js');
+
+const suiDrawerHeaderCss = () => `@charset "UTF-8";.sc-sui-drawer-header-h{position:relative;display:flex;width:100%;box-sizing:border-box;overflow:clip;padding:20px;background:var(--sui-bg-white-0);font-family:var(--sui-font-sans, "Inter", system-ui, sans-serif);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}[data-sui-size=small].sc-sui-drawer-header-h{align-items:center;gap:12px}[data-sui-size=large].sc-sui-drawer-header-h{align-items:flex-start;gap:16px}[data-sui-size=xlarge].sc-sui-drawer-header-h{align-items:flex-start;gap:20px;padding:24px}.sui-drawer-header__leading.sc-sui-drawer-header{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600);width:24px;height:24px}.sui-drawer-header__leading--badge.sc-sui-drawer-header{box-sizing:border-box;width:48px;height:48px;padding:12px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small)}[data-sui-size=xlarge].sc-sui-drawer-header-h .sui-drawer-header__leading--badge.sc-sui-drawer-header{width:56px;height:56px;padding:14px}.sui-drawer-header__content.sc-sui-drawer-header{flex:1 0 0;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px}[data-sui-size=small].sc-sui-drawer-header-h .sui-drawer-header__content.sc-sui-drawer-header{gap:0}.sui-drawer-header__title-row.sc-sui-drawer-header{display:flex;align-items:center;gap:8px;width:100%}.sui-drawer-header__title.sc-sui-drawer-header{margin:0;font-size:18px;font-weight:500;line-height:24px;letter-spacing:-0.015em;color:var(--sui-text-strong-950);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-drawer-header__description.sc-sui-drawer-header{margin:0;width:100%;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-sub-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-sui-size=xlarge].sc-sui-drawer-header-h .sui-drawer-header__title.sc-sui-drawer-header{font-size:20px;line-height:28px}[data-sui-size=xlarge].sc-sui-drawer-header-h .sui-drawer-header__description.sc-sui-drawer-header{font-size:16px;line-height:22px}.sui-drawer-header__std-badge.sc-sui-drawer-header{flex-shrink:0}.sui-drawer-header__badge.sc-sui-drawer-header{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:20px;height:20px;padding:2px;background:var(--sui-state-error-base);color:var(--sui-static-white);border-radius:var(--sui-radius-full);font-size:12px;font-weight:500;line-height:16px}.sui-drawer-header__link.sc-sui-drawer-header{flex-shrink:0;align-self:center}.sui-drawer-header__dismiss.sc-sui-drawer-header{flex-shrink:0}.sui-drawer-header__divider.sc-sui-drawer-header{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sui-stroke-soft-200)}`;
+
+const SuiDrawerHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dismiss = index.createEvent(this, "dismiss");
+        this.linkClick = index.createEvent(this, "linkClick");
+        /** Tipo de header. Default `basic`. `left-icon` muestra el leading icon. */
+        this.type = 'basic';
+        /** Tamaño. Default `small` (64px, items-center). `large` = 88px, items-start +
+         *  description. `xlarge` = un peldaño más (extensión SUI). */
+        this.size = 'small';
+        /**
+         * Título / línea principal del header.
+         * Renombrado desde el `title` del Angular: `title` es un @Prop reservado del
+         * DOM (dispara el tooltip nativo gris). En HTML el atributo es `heading`.
+         */
+        this.heading = '';
+        /** Descripción opcional (renderiza solo cuando size='large' o 'xlarge'). */
+        this.description = null;
+        /** RemixIcon name (sin 'ri-') para variant left-icon. */
+        this.icon = null;
+        /**
+         * Badge junto al title: `number` → badge numérico de Figma (círculo error 20×20;
+         * `0` se pinta) · string → <sui-badge> con fallbacks · `SuiBadgeConfig` →
+         * <sui-badge> con color/variant/size (defaults orange/light/small). `null` = sin badge.
+         * Desde HTML un número llega como string: para el numérico pasarlo por propiedad.
+         */
+        this.badge = null;
+        /**
+         * Link Button inline (Figma input `button=true`) — string (solo label, emite
+         * `linkClick`) o `SuiLinkConfig { label, href?, target?, rel? }`: con href
+         * renderiza <a> real; rel automático para `_blank`. Solo en size='small' (las
+         * variants Large de Figma no tienen el prop `button`).
+         */
+        this.link = null;
+        /** Muestra el close button trailing. Default `true`. */
+        this.showDismiss = true;
+        /** Muestra divider 1px al fondo del header. Default `false`. */
+        this.showDivider = false;
+        /** aria-label del close button. Default `Cerrar`. */
+        this.dismissAriaLabel = 'Cerrar';
+        this.onDismiss = (event) => {
+            event.stopPropagation();
+            this.dismiss.emit(event.detail);
+        };
+        this.onLink = (event) => {
+            event.stopPropagation();
+            this.linkClick.emit(event.detail);
+        };
+    }
+    /** Sin tooltip nativo: `title={null}` del Host solo actúa desde el segundo render. */
+    componentWillLoad() {
+        this.el.removeAttribute('title');
+    }
+    /** Valor del badge numérico (null si el badge no es number). */
+    get badgeNum() {
+        return typeof this.badge === 'number' ? this.badge : null;
+    }
+    /** Config del badge estándar (string → { label }). null si es número o no hay. */
+    get badgeCfg() {
+        const b = this.badge;
+        if (b === null || typeof b === 'number')
+            return null;
+        const cfg = typeof b === 'string' ? { label: b } : b;
+        return cfg.label ? cfg : null;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const hasLeading = this.type === 'left-icon' && !!this.icon;
+        const isLarge = this.size === 'large' || this.size === 'xlarge';
+        const link = this.size === 'small' ? suiConfigs.resolverLink(this.link) : null;
+        const badgeNum = this.badgeNum;
+        const badgeCfg = this.badgeCfg;
+        return (index.h(index.Host, { key: 'f47ea200e9f7814b70287ab881512120e59411b4', title: null, "data-sui-type": this.type, "data-sui-size": this.size, "data-sui-divider": this.showDivider ? '' : undefined }, hasLeading && (index.h("div", { key: '0321ca4bbaf3e6e750840856c5a7c87ad9fd38db', class: {
+                'sui-drawer-header__leading': true,
+                'sui-drawer-header__leading--badge': isLarge,
+            }, "aria-hidden": "true" }, index.h("sui-icon", { key: '4bb39db3aa084cba058831a9b78922ea722bffb7', name: this.icon, size: 24 }))), index.h("div", { key: 'f3930f57ea7d1a7cb5f7229957d059994ffd54c2', class: "sui-drawer-header__content" }, index.h("div", { key: '6a49f8f1e8d455e79d8f943428e81ae4a2bd6916', class: "sui-drawer-header__title-row" }, index.h("h2", { key: '6f3a6a547fa5b641835b78b5ce1c1100cd0c52d6', class: "sui-drawer-header__title" }, this.heading), badgeNum !== null ? (
+        // Badge numérico Figma (círculo error 20×20): el número se lee como texto.
+        index.h("span", { class: "sui-drawer-header__badge" }, badgeNum)) : (badgeCfg && (index.h("sui-badge", { class: "sui-drawer-header__std-badge", color: (_a = badgeCfg.color) !== null && _a !== void 0 ? _a : 'orange', variant: (_b = badgeCfg.variant) !== null && _b !== void 0 ? _b : 'light', size: ((_c = badgeCfg.size) !== null && _c !== void 0 ? _c : 'small') }, badgeCfg.label)))), isLarge && this.description && (index.h("p", { key: '09fdee497e141f3ab1c48c5573559ac2f678d7e5', class: "sui-drawer-header__description" }, this.description))), link && (index.h("sui-link-button", { key: 'ca6197634dc4ef5bd25e26a6122486b4bec2998c', class: "sui-drawer-header__link", variant: "gray", size: "medium", underline: true, href: (_d = link.href) !== null && _d !== void 0 ? _d : null, target: (_e = link.target) !== null && _e !== void 0 ? _e : null, rel: (_f = link.rel) !== null && _f !== void 0 ? _f : null, onClicked: this.onLink }, link.label)), this.showDismiss && (index.h("sui-compact-button", { key: '26e0ea819c8cb478c3de14273a51641ebd22029c', class: "sui-drawer-header__dismiss", icon: "close-line", variantStyle: "ghost", size: "large", ariaLabel: this.dismissAriaLabel, onClicked: this.onDismiss })), this.showDivider && index.h("span", { key: '718486745c47ed8dedc73213db9c9e1b245eb6ba', class: "sui-drawer-header__divider", "aria-hidden": "true" })));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiDrawerHeader.style = suiDrawerHeaderCss();
+
+exports.sui_drawer_header = SuiDrawerHeader;

package/dist/cjs/sui-dropdown-caption.cjs.entry.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiDropdownCaptionCss = () => `@charset "UTF-8";.sc-sui-dropdown-caption-h{display:flex;align-items:center;padding:8px;background:var(--sui-bg-white-0);width:100%;box-sizing:border-box;overflow:clip}.sui-dropdown-caption__text.sc-sui-dropdown-caption{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -0.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;color:var(--sui-text-soft-400);word-break:break-word}`;
+
+const SuiDropdownCaption = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '3679adf5b1b065f2736f36dce706587f2a00d8d4' }, index.h("span", { key: 'f360cf40a9d8ffcbe0f280edd6fda499e6a6ede5', class: "sui-dropdown-caption__text" }, index.h("slot", { key: '05cb28fb2a6a8acd744ccceeffbce5cf4c5d7ff0' }))));
+    }
+};
+SuiDropdownCaption.style = suiDropdownCaptionCss();
+
+exports.sui_dropdown_caption = SuiDropdownCaption;

package/dist/cjs/sui-dropdown-item_2.cjs.entry.js

@@ -0,0 +1,381 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiDropdownItemCss = () => `@charset "UTF-8";.sc-sui-dropdown-item-h{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background 100ms ease-out, box-shadow 100ms ease-out;user-select:none}.sc-sui-dropdown-item-h:hover{background:var(--sui-bg-weak-50)}.sc-sui-dropdown-item-h:active:not([data-sui-disabled]),.sc-sui-dropdown-item-h:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}[hidden].sc-sui-dropdown-item-h{display:none}[data-sui-size=small].sc-sui-dropdown-item-h{min-height:36px;padding:8px;gap:8px}[data-sui-size=large].sc-sui-dropdown-item-h{min-height:56px;padding:6px 8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}[data-sui-size=large].sc-sui-dropdown-item-h .sui-dropdown-item__text.sc-sui-dropdown-item{flex-direction:column;align-items:flex-start;gap:4px}[data-sui-size=large].sc-sui-dropdown-item-h .sui-dropdown-item__label.sc-sui-dropdown-item{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);font-weight:var(--sui-type-label-md-weight, 500)}[data-sui-size=xlarge].sc-sui-dropdown-item-h{min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}[data-sui-size=xlarge].sc-sui-dropdown-item-h .sui-dropdown-item__text.sc-sui-dropdown-item{flex-direction:column;align-items:flex-start;gap:4px}[data-sui-size=xlarge].sc-sui-dropdown-item-h .sui-dropdown-item__label.sc-sui-dropdown-item{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);font-weight:var(--sui-type-label-md-weight, 500)}[data-sui-size=xlarge].sc-sui-dropdown-item-h .sui-dropdown-item__description.sc-sui-dropdown-item{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -0.006em)}.sui-dropdown-item__leading.sc-sui-dropdown-item{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading.sc-sui-dropdown-item:empty{display:none}[data-sui-size=large][data-sui-framed].sc-sui-dropdown-item-h .sui-dropdown-item__leading.sc-sui-dropdown-item,[data-sui-size=xlarge][data-sui-framed].sc-sui-dropdown-item-h .sui-dropdown-item__leading.sc-sui-dropdown-item{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));box-sizing:border-box}[data-sui-size=xlarge][data-sui-framed].sc-sui-dropdown-item-h .sui-dropdown-item__leading.sc-sui-dropdown-item{padding:12px}.sui-dropdown-item__text.sc-sui-dropdown-item{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-dropdown-item__label.sc-sui-dropdown-item{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -0.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel.sc-sui-dropdown-item{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description.sc-sui-dropdown-item{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing.sc-sui-dropdown-item{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing.sc-sui-dropdown-item:empty{display:none}.sui-dropdown-item__shortcut.sc-sui-dropdown-item{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}[data-sui-mode=option][data-sui-selected].sc-sui-dropdown-item-h{background:var(--sui-primary-alpha-10)}[data-sui-mode=option][data-sui-selected].sc-sui-dropdown-item-h .sui-dropdown-item__label.sc-sui-dropdown-item,[data-sui-mode=option][data-sui-selected].sc-sui-dropdown-item-h .sui-dropdown-item__sublabel.sc-sui-dropdown-item,[data-sui-mode=option][data-sui-selected].sc-sui-dropdown-item-h .sui-dropdown-item__check.sc-sui-dropdown-item{color:var(--sui-primary-base)}[data-sui-mode=option][data-sui-selected].sc-sui-dropdown-item-h:hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check.sc-sui-dropdown-item{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}[data-sui-highlighted].sc-sui-dropdown-item-h:not([data-sui-selected]){background:var(--sui-bg-weak-50)}[data-sui-disabled].sc-sui-dropdown-item-h{cursor:not-allowed;pointer-events:none}[data-sui-disabled].sc-sui-dropdown-item-h .sui-dropdown-item__label.sc-sui-dropdown-item,[data-sui-disabled].sc-sui-dropdown-item-h .sui-dropdown-item__sublabel.sc-sui-dropdown-item,[data-sui-disabled].sc-sui-dropdown-item-h .sui-dropdown-item__description.sc-sui-dropdown-item{color:var(--sui-text-disabled-300)}[data-sui-disabled].sc-sui-dropdown-item-h .sui-dropdown-item__leading.sc-sui-dropdown-item{color:var(--sui-icon-disabled-300)}[data-sui-disabled].sc-sui-dropdown-item-h .sui-dropdown-item__leading.sc-sui-dropdown-item>.sc-sui-dropdown-item:not(sui-icon){opacity:0.48}[data-sui-disabled].sc-sui-dropdown-item-h:hover{background:var(--sui-bg-white-0)}`;
+
+const SuiDropdownItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        /**
+         * Sublabel inline tras el label (gap-4), text-soft-400 12/16. En size=small
+         * se renderiza en la misma fila; en size=large queda dentro de la fila
+         * superior del layout columnar.
+         */
+        this.sublabel = null;
+        /**
+         * Descripcion - segunda linea bajo el label, solo visible en size='large'/'xlarge'
+         * (layout columnar de Figma 405:6432). En size='small' se ignora (el Small usa
+         * `sublabel` inline). Texto 12/16 text-sub-600.
+         */
+        this.description = null;
+        /** Tamaño Small (36px), Large (56px) o XLarge (76px, extensión SUI). Default `small`. */
+        this.size = 'small';
+        /**
+         * Envuelve el slot=leading en un frame circular (border soft-200, padding-10,
+         * radius-full, shadow x-small) - patron del Figma Large type=basic. Solo surte
+         * efecto cuando size='large'/'xlarge'. NO usar con avatar/flag/brand-logo (ya traen su
+         * propia forma). Default false. En HTML el atributo es `leading-framed`.
+         */
+        this.leadingFramed = false;
+        /**
+         * Mode ARIA: 'menuitem' (default, para menus) o 'option' (para listbox/select).
+         * En 'option' se expone `aria-selected` y se renderea el check trailing
+         * automatico cuando `selected=true`.
+         */
+        this.mode = 'menuitem';
+        /** Item seleccionado (highlight + check icon si mode=option). Default false. */
+        this.selected = false;
+        /**
+         * Keyboard-highlighted state - distinto al hover (mouse) y al selected (value).
+         * Lo usa el sui-select para sincronizar el highlighted index con ArrowDown/Up.
+         */
+        this.highlighted = false;
+        /** Disabled (no clickeable, texto e ícono en disabled-300). Default false. */
+        this.disabled = false;
+        /** Shortcut text (ej. "Cmd1", "ShiftK") - renderiza chip blanco al trailing. */
+        this.shortcut = null;
+        this.activate = (event) => {
+            if (this.disabled) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            this.clicked.emit(event);
+        };
+        this.onKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+                event.preventDefault();
+                this.activate(event);
+            }
+        };
+    }
+    /** Description solo se renderiza en size='large'/'xlarge' (layout columnar). */
+    get hasDescription() {
+        return this.size !== 'small' && !!this.description;
+    }
+    /** Mostrar check icon trailing automatico cuando es option seleccionada. */
+    get showCheck() {
+        return this.mode === 'option' && this.selected;
+    }
+    /** iOS: la presencia del touchstart engancha el :active; touchend lo suelta.
+     *  Pasivos (como SuiToque del Angular) para no frenar el scroll. */
+    onTouchStart() { }
+    onTouchEnd() {
+        this.el.blur();
+    }
+    render() {
+        const isOption = this.mode === 'option';
+        return (index.h(index.Host, { key: 'ea45046b587ee2fc849f3904a0dc97cfc90fe35d', role: isOption ? 'option' : 'menuitem', "data-sui-mode": this.mode, "data-sui-size": this.size, "data-sui-framed": this.leadingFramed ? '' : undefined, "data-sui-selected": this.selected ? '' : undefined, "data-sui-highlighted": this.highlighted ? '' : undefined, "data-sui-disabled": this.disabled ? '' : undefined, "aria-selected": isOption ? (this.selected ? 'true' : 'false') : undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? '-1' : '0', onClick: this.activate, onKeyDown: this.onKeyDown }, index.h("div", { key: 'c82be13612cc0e549d402ee4486d95ba3c53ef49', class: "sui-dropdown-item__leading" }, index.h("slot", { key: '7e8828fce25cc190b516205cf1d6d7f68d136a24', name: "leading" })), index.h("div", { key: 'd0d603011eba016f2c89a89cb6a2de9135c33892', class: "sui-dropdown-item__text" }, index.h("span", { key: '306fd8227aad28014487f87055f5c47286686baa', class: "sui-dropdown-item__label" }, this.label), this.sublabel && index.h("span", { key: 'c68621617a713616a7dc1ef6e34312c68f9a081d', class: "sui-dropdown-item__sublabel" }, this.sublabel), this.hasDescription && (index.h("span", { key: '9937c17bedd95e161bd6aaaff4c17ee1de7453ce', class: "sui-dropdown-item__description" }, this.description))), index.h("div", { key: '72d2ddcc4f107cdac61343b5447172baa134d64a', class: "sui-dropdown-item__trailing" }, index.h("slot", { key: '2afcb7dc6af7a2eb65c3ad9342ccf15ec64f884e', name: "trailing" }), this.shortcut && index.h("span", { key: '503550cb87ba58a9e10f9dc559fb246431f750bd', class: "sui-dropdown-item__shortcut" }, this.shortcut), this.showCheck && (index.h("sui-icon", { key: 'aac3e6f2effc2908db114dbf3ae2a68b7bfb70bd', class: "sui-dropdown-item__check", name: "check-line", size: 20 })))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiDropdownItem.style = suiDropdownItemCss();
+
+const suiDropdownMenuCss = () => `@charset "UTF-8";.sc-sui-dropdown-menu-h{display:inline-block;position:relative;font-family:var(--sui-font-sans)}.sui-dropdown-menu__trigger.sc-sui-dropdown-menu{display:inline-block;cursor:pointer;outline:none}[data-sui-disabled].sc-sui-dropdown-menu-h .sui-dropdown-menu__trigger.sc-sui-dropdown-menu{cursor:not-allowed}.sui-dropdown-menu__panel.sc-sui-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:50;box-sizing:border-box;width:max-content;min-width:0;max-width:min(360px, 100vw - 16px);max-height:min(400px, 100vh - 32px);overflow-y:auto;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-16, 16px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, 0.1));padding:8px;display:flex;flex-direction:column;gap:4px;cursor:default;color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;scrollbar-width:thin;scrollbar-color:var(--sui-stroke-soft-200, #ebebeb) transparent}.sui-dropdown-menu__panel.sc-sui-dropdown-menu::-webkit-scrollbar{width:6px}.sui-dropdown-menu__panel.sc-sui-dropdown-menu::-webkit-scrollbar-thumb{background:var(--sui-stroke-soft-200, #ebebeb);border-radius:3px}.sui-dropdown-menu__panel.sc-sui-dropdown-menu{animation:sui-dropdown-menu-in 120ms var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1))}[data-sui-align-end].sc-sui-dropdown-menu-h .sui-dropdown-menu__panel.sc-sui-dropdown-menu{left:auto;right:0}[data-sui-flip].sc-sui-dropdown-menu-h .sui-dropdown-menu__panel.sc-sui-dropdown-menu{top:auto;bottom:calc(100% + 4px);animation-name:sui-dropdown-menu-in-up}@keyframes sui-dropdown-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sui-dropdown-menu-in-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.sui-dropdown-menu__panel.sc-sui-dropdown-menu{animation:none}}@media (max-width: 767px){.sui-dropdown-menu__panel.sc-sui-dropdown-menu{scrollbar-width:none}.sui-dropdown-menu__panel.sc-sui-dropdown-menu::-webkit-scrollbar{display:none}}`;
+
+const SuiDropdownMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openedChange = index.createEvent(this, "openedChange");
+        this.opened = index.createEvent(this, "opened");
+        this.closed = index.createEvent(this, "closed");
+        /* ── Layout / posicionamiento ── */
+        /** Si true, el panel matchea el ancho del trigger. Default: auto width. */
+        this.matchWidth = false;
+        /** Min-width fijo del panel (px). Si matchWidth + minWidth: `max(triggerWidth, minWidth)`. Default `null`. */
+        this.minWidth = null;
+        /** Posición primaria. `auto` = below con fallback above (auto-flip). Default `auto`. */
+        this.position = 'auto';
+        /** Margen del viewport edge en px (canon SUI). Default `8`. */
+        this.viewportMargin = 8;
+        /** Clase custom para el panel (overrides de bg/padding desde el consumer). Default `''`. */
+        this.panelClass = '';
+        /** Disabled — no abre el menu al clickear el trigger. Default `false`. */
+        this.disabled = false;
+        /**
+         * Rol del popup para `aria-haspopup` del trigger. Default `menu` (items con
+         * role="menuitem"). Los consumers de tipo listbox (items role="option") DEBEN
+         * pasar `popup-role="listbox"`.
+         */
+        this.popupRole = 'menu';
+        /**
+         * Selector CSS del trigger externo (resuelto en `document`). Si presente, el
+         * menu se ancla a ese elemento y NO renderea el wrapper de trigger interno
+         * (el parent maneja el click y llama `toggle()`). Caso: compact-selects.
+         */
+        this.originSelector = null;
+        /** Trigger externo asignado imperativamente por JS (tiene prioridad sobre originSelector). */
+        this.originElement = null;
+        /* ── Estado interno ── */
+        /** Panel abierto. Refleja a `data-sui-open` para el visual state. */
+        this.open = false;
+        /** Auto-flip arriba cuando no cabe abajo (replica fallback positions del CDK). */
+        this.flipUp = false;
+        /** Panel alineado al borde derecho del trigger (fallback `end` del CDK). */
+        this.alignEnd = false;
+        /** Ancho/min-width computados del panel (px) cuando matchWidth está activo. */
+        this.panelWidth = null;
+        this.panelMinWidth = null;
+        this.resizeObserver = null;
+        /* ── Trigger interaction (modo content-projection) ── */
+        this.onTriggerClick = (event) => {
+            if (this.disabled)
+                return;
+            event.stopPropagation();
+            this.toggleMenu();
+        };
+        this.onTriggerKeydown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+                /* Si el control ya atendió la tecla (sui-button hace preventDefault y
+                   despacha su propio click, que llega a onTriggerClick), no se vuelve a
+                   alternar: sin esto Enter abría y cerraba el menú en el mismo golpe. */
+                if (event.defaultPrevented)
+                    return;
+                event.preventDefault();
+                this.toggleMenu();
+            }
+            else if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.openMenu();
+            }
+        };
+    }
+    onDisabledChange(value) {
+        if (value && this.open)
+            this.closeMenu();
+    }
+    /** aria-haspopup / aria-expanded van al control proyectado (button, a, role=button),
+     *  no al span wrapper: el span es genérico y no recibe foco (a11y 09-10-2026). */
+    componentDidRender() {
+        var _a;
+        if (!this.hasInternalTrigger)
+            return;
+        const control = (_a = this.el
+            .querySelector('.sui-dropdown-menu__trigger')) === null || _a === void 0 ? void 0 : _a.querySelector('button, a[href], [role="button"]');
+        if (!control)
+            return;
+        control.setAttribute('aria-haspopup', this.popupRole);
+        control.setAttribute('aria-expanded', String(this.open));
+    }
+    disconnectedCallback() {
+        this.teardownResizeObserver();
+    }
+    /* ── Trigger resolution ── */
+    /** Elemento al que se ancla el panel: origin externo > wrapper interno del trigger. */
+    getTriggerEl() {
+        if (this.originElement)
+            return this.originElement;
+        if (this.originSelector) {
+            return document.querySelector(this.originSelector);
+        }
+        return this.el.querySelector('.sui-dropdown-menu__trigger');
+    }
+    get hasInternalTrigger() {
+        return !this.originElement && !this.originSelector;
+    }
+    /* ── iOS :active fix (presencia del binding engage el touch pipeline) ── */
+    onTouchStart() {
+        /* no-op a propósito; la presencia del listener engage el touch pipeline iOS. */
+    }
+    onTouchEnd(event) {
+        const t = event.target;
+        const btn = t === null || t === void 0 ? void 0 : t.closest('button, [role="menuitem"], [role="option"]');
+        if (btn)
+            btn.blur();
+    }
+    /* ── Outside / scroll / escape close (replica backdrop + scrollStrategy CDK) ── */
+    onDocumentClick(event) {
+        if (!this.open)
+            return;
+        const target = event.target;
+        // No cerrar si el click cae dentro del host (trigger interno o panel light DOM)
+        // ni dentro del origin externo (su click lo maneja el parent vía toggle()).
+        if (target && this.el.contains(target))
+            return;
+        const origin = this.getTriggerEl();
+        if (target && origin && origin.contains(target))
+            return;
+        this.closeMenu();
+    }
+    onDocumentKeydown(event) {
+        if (this.open && event.key === 'Escape') {
+            event.preventDefault();
+            this.closeMenu();
+        }
+    }
+    /* Sin re-posicionar en scroll (lockedPosition del Angular, 21-07-2026): el
+       lado se decide al ABRIR y queda fijo; si se re-elige en pleno scroll el
+       panel salta de arriba a abajo. El panel es absolute dentro del host, así
+       que acompaña al trigger durante el scroll sin recalcular. */
+    onWindowResize() {
+        if (this.open)
+            requestAnimationFrame(() => this.reposition());
+    }
+    /* ── Open / close (API pública — espeja open()/close()/toggle() del Angular) ── */
+    /** Abre el panel imperativamente. No hace nada si disabled. */
+    async openMenu() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+        this.syncWidth();
+        this.openedChange.emit(true);
+        this.opened.emit();
+        requestAnimationFrame(() => {
+            this.reposition();
+            this.setupResizeObserver();
+            this.focusFirstItem();
+        });
+    }
+    /** Cierra el panel imperativamente. */
+    async closeMenu() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.flipUp = false;
+        this.alignEnd = false;
+        this.teardownResizeObserver();
+        this.openedChange.emit(false);
+        this.closed.emit();
+    }
+    /** Alterna el panel imperativamente. */
+    async toggleMenu() {
+        if (this.open)
+            await this.closeMenu();
+        else
+            await this.openMenu();
+    }
+    /** Estado actual del panel (read-only). Espeja `isOpen()` del Angular. */
+    async isOpen() {
+        return this.open;
+    }
+    /* ── Width sync (replica matchWidth + minWidth + ResizeObserver del Angular) ── */
+    syncWidth() {
+        const triggerEl = this.getTriggerEl();
+        if (!triggerEl) {
+            this.panelWidth = null;
+            this.panelMinWidth = this.minWidth;
+            return;
+        }
+        const triggerWidth = triggerEl.getBoundingClientRect().width;
+        const minW = this.minWidth;
+        if (this.matchWidth && minW === null) {
+            // Panel matchea exactamente el ancho del trigger.
+            this.panelWidth = triggerWidth;
+            this.panelMinWidth = null;
+        }
+        else if (this.matchWidth && minW !== null) {
+            // max(triggerWidth, minWidth).
+            this.panelWidth = null;
+            this.panelMinWidth = Math.max(triggerWidth, minW);
+        }
+        else {
+            // Sin matchWidth: solo aplica minWidth si se pasó.
+            this.panelWidth = null;
+            this.panelMinWidth = minW;
+        }
+    }
+    setupResizeObserver() {
+        if (!this.matchWidth || typeof ResizeObserver === 'undefined')
+            return;
+        const triggerEl = this.getTriggerEl();
+        if (!triggerEl)
+            return;
+        this.teardownResizeObserver();
+        this.resizeObserver = new ResizeObserver(() => {
+            if (!this.open)
+                return;
+            this.syncWidth();
+            requestAnimationFrame(() => this.reposition());
+        });
+        this.resizeObserver.observe(triggerEl);
+    }
+    teardownResizeObserver() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = null;
+    }
+    /* ── Auto-flip / reposición (replica fallback positions + reposition CDK) ── */
+    reposition() {
+        const panel = this.el.querySelector('.sui-dropdown-menu__panel');
+        const triggerEl = this.getTriggerEl();
+        if (!panel || !triggerEl)
+            return;
+        const hostRect = triggerEl.getBoundingClientRect();
+        const panelHeight = panel.offsetHeight;
+        const margin = this.viewportMargin;
+        const spaceBelow = window.innerHeight - hostRect.bottom;
+        const spaceAbove = hostRect.top;
+        let flip;
+        if (this.position === 'above') {
+            // Forzado arriba; solo cae a below si no cabe arriba pero sí abajo.
+            flip = !(spaceAbove < panelHeight + margin && spaceBelow > spaceAbove);
+        }
+        else {
+            // 'auto' / 'below': below por default, flip arriba si no cabe abajo.
+            flip = spaceBelow < panelHeight + margin && spaceAbove > spaceBelow;
+        }
+        if (flip !== this.flipUp)
+            this.flipUp = flip;
+        // Horizontal: si no entra alineado a la izquierda y sí a la derecha → end.
+        const panelWidth = panel.offsetWidth;
+        const end = hostRect.left + panelWidth > window.innerWidth - margin && hostRect.right - panelWidth >= margin;
+        if (end !== this.alignEnd)
+            this.alignEnd = end;
+    }
+    /** Mueve foco al primer item enfocable del panel (mejora keyboard nav). */
+    focusFirstItem() {
+        const panel = this.el.querySelector('.sui-dropdown-menu__panel');
+        if (!panel)
+            return;
+        const first = panel.querySelector('[role="menuitem"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"]), button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        first === null || first === void 0 ? void 0 : first.focus();
+    }
+    /* ── Panel style (width/min-width inline cuando aplica) ── */
+    get panelStyle() {
+        const style = {};
+        if (this.panelWidth !== null)
+            style.width = `${this.panelWidth}px`;
+        if (this.panelMinWidth !== null)
+            style['min-width'] = `${this.panelMinWidth}px`;
+        return style;
+    }
+    render() {
+        const panelClasses = {
+            'sui-dropdown-menu__panel': true,
+        };
+        if (this.panelClass)
+            panelClasses[this.panelClass] = true;
+        return (index.h(index.Host, { key: '3be3c07c57e81a0858cac5dd349af05d4b3dd84b', "data-sui-open": this.open ? '' : null, "data-sui-flip": this.flipUp ? '' : null, "data-sui-align-end": this.alignEnd ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, this.hasInternalTrigger && (index.h("span", { key: '0ac3ba20c5f15ab942f47dbe3ee3f7f7310d6f6d', class: "sui-dropdown-menu__trigger", onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeydown }, index.h("slot", { key: '6613e5c8c32523c12500c14397cb340a161b71a2', name: "trigger" }))), this.open && (index.h("div", { key: 'd17e1408c49339a12d3e5e0510ef30d09509e0e1', class: panelClasses,
+            // role=menu solo con trigger interno (padre de los menuitem). listbox se
+            // mantiene en el panel: sui-select (Stencil) no trae su propio listbox.
+            role: this.popupRole === 'listbox'
+                ? 'listbox'
+                : this.popupRole === 'menu' && this.hasInternalTrigger
+                    ? 'menu'
+                    : undefined, style: this.panelStyle, onClick: (e) => e.stopPropagation() }, index.h("slot", { key: 'd5c8134cdf4e5aff5dbf5850ab28cf40ca6ef4ff', name: "panel" }), index.h("slot", { key: 'bbbcbe463ad60cae9ca83828be30f760c419dfa4' })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+SuiDropdownMenu.style = suiDropdownMenuCss();
+
+exports.sui_dropdown_item = SuiDropdownItem;
+exports.sui_dropdown_menu = SuiDropdownMenu;