@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/esm/co-lightbox.entry.js

@@ -0,0 +1,342 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { l as langFromLocale } from './dateI18n-C1DCLOEl.js';
+
+/**
+ * Built-in UI string dictionary for co-lightbox (aria labels + tooltips).
+ * Same strategy as dateI18n/fileI18n: ships es/en/pt keyed by the `locale`
+ * prop. The `counter` template uses `{i}` / `{n}` placeholders.
+ */
+const DICT = {
+    es: {
+        close: 'Cerrar visor',
+        prevImage: 'Imagen anterior',
+        nextImage: 'Imagen siguiente',
+        zoomIn: 'Acercar',
+        zoomOut: 'Alejar',
+        zoomReset: 'Restablecer zoom',
+        openOriginal: 'Abrir original',
+        counter: '{i} de {n}',
+    },
+    en: {
+        close: 'Close viewer',
+        prevImage: 'Previous image',
+        nextImage: 'Next image',
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        zoomReset: 'Reset zoom',
+        openOriginal: 'Open original',
+        counter: '{i} of {n}',
+    },
+    pt: {
+        close: 'Fechar visualizador',
+        prevImage: 'Imagem anterior',
+        nextImage: 'Próxima imagem',
+        zoomIn: 'Aproximar',
+        zoomOut: 'Afastar',
+        zoomReset: 'Redefinir zoom',
+        openOriginal: 'Abrir original',
+        counter: '{i} de {n}',
+    },
+};
+/** Resolve the built-in UI strings for a locale. */
+function getLightboxStrings(locale) {
+    return DICT[langFromLocale(locale)];
+}
+
+const coLightboxCss = () => `:host{display:contents;font-family:var(--co-font-family-primary)}.co-lightbox{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;background:var(--co-color-opacity-negro-80);opacity:0;pointer-events:none;transition:opacity 0.2s ease}.co-lightbox--open{opacity:1;pointer-events:auto}.co-lightbox__toolbar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-lg);background:linear-gradient(var(--co-color-opacity-negro-50), transparent)}.co-lightbox__caption{flex:1;min-width:0;color:var(--co-color-base-blanco);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-lightbox__zoom{display:flex;align-items:center;gap:var(--co-spacing-xxs);padding:0 var(--co-spacing-xs);border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8)}.co-lightbox__btn{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--co-spacing-xs);border:none;border-radius:var(--co-border-radius-full);background:transparent;color:var(--co-color-base-blanco);font-family:inherit;font-size:var(--co-font-size-13);cursor:pointer;transition:background 0.15s ease}.co-lightbox__btn:hover{background:var(--co-color-opacity-blanco-16)}.co-lightbox__zoom-value{min-width:48px;font-variant-numeric:tabular-nums}.co-lightbox__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.co-lightbox__img{max-width:calc(100vw - var(--co-spacing-5xl) * 2);max-height:calc(100vh - var(--co-spacing-5xl) * 2);border-radius:var(--co-border-radius-xs);user-select:none;transition:transform 0.18s ease}.co-lightbox__img--zoomed{cursor:grab}.co-lightbox__img--dragging{cursor:grabbing;transition:none}.co-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8);color:var(--co-color-base-blanco);cursor:pointer;transition:background 0.15s ease}.co-lightbox__nav:hover{background:var(--co-color-opacity-blanco-25)}.co-lightbox__nav--prev{left:var(--co-spacing-lg)}.co-lightbox__nav--next{right:var(--co-spacing-lg)}.co-lightbox__counter{position:absolute;bottom:var(--co-spacing-lg);left:50%;transform:translateX(-50%);z-index:2;padding:var(--co-spacing-xs) var(--co-spacing-md);border-radius:var(--co-border-radius-full);background:var(--co-color-opacity-blanco-8);color:var(--co-color-base-blanco);font-size:var(--co-font-size-13);font-variant-numeric:tabular-nums}`;
+
+const MIN_SCALE = 1;
+const MAX_SCALE = 8;
+const WHEEL_FACTOR = 1.15;
+const DBLCLICK_SCALE = 2.5;
+const CoLightbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coClose = createEvent(this, "coClose", 3);
+        this.coChange = createEvent(this, "coChange", 3);
+        /** JSON array of {@link LightboxImage} (controlled by the host). */
+        this.images = '[]';
+        /** Index shown when the viewer opens. */
+        this.startIndex = 0;
+        /** Whether the viewer is visible. */
+        this.open = false;
+        this.index = 0;
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+        this.dragging = false;
+        this.lastImagesStr = '';
+        this.lastParsed = [];
+        this.dragStart = { x: 0, y: 0, tx: 0, ty: 0 };
+        /** Focus the close button on the render that follows opening. */
+        this.pendingFocus = false;
+        this.handleKey = (e) => {
+            if (!this.open)
+                return;
+            switch (e.key) {
+                case 'Escape':
+                    this.requestClose();
+                    break;
+                case 'ArrowLeft':
+                    this.goTo(-1);
+                    break;
+                case 'ArrowRight':
+                    this.goTo(1);
+                    break;
+                case '+':
+                case '=':
+                    this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0);
+                    break;
+                case '-':
+                    this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0);
+                    break;
+                case '0':
+                    this.resetView();
+                    break;
+                case 'Tab':
+                    this.trapTab(e);
+                    return;
+                default:
+                    return; // unhandled keys pass through untouched
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this.requestClose = () => {
+            this.coClose.emit();
+        };
+        this.handleWheel = (e) => {
+            e.preventDefault();
+            const [px, py] = this.stagePoint(e);
+            const factor = e.deltaY < 0 ? WHEEL_FACTOR : 1 / WHEEL_FACTOR;
+            this.zoomAt(this.scale * factor, px, py);
+        };
+        this.handleDblClick = (e) => {
+            const [px, py] = this.stagePoint(e);
+            this.zoomAt(this.scale > MIN_SCALE ? MIN_SCALE : DBLCLICK_SCALE, px, py);
+        };
+        this.handlePointerDown = (e) => {
+            var _a;
+            if (this.scale <= MIN_SCALE)
+                return;
+            e.preventDefault();
+            this.dragging = true;
+            this.dragStart = { x: e.clientX, y: e.clientY, tx: this.tx, ty: this.ty };
+            (_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.dragging)
+                return;
+            const tx = this.dragStart.tx + (e.clientX - this.dragStart.x);
+            const ty = this.dragStart.ty + (e.clientY - this.dragStart.y);
+            [this.tx, this.ty] = this.clampPan(tx, ty, this.scale);
+        };
+        this.handlePointerUp = (e) => {
+            var _a;
+            if (!this.dragging)
+                return;
+            this.dragging = false;
+            (_a = this.imgEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
+        };
+        this.openOriginal = () => {
+            const img = this.parsedImages[this.index];
+            if (img === null || img === void 0 ? void 0 : img.src)
+                window.open(img.src, '_blank', 'noopener');
+        };
+        this.stop = (e) => e.stopPropagation();
+    }
+    get parsedImages() {
+        const raw = this.images;
+        if (typeof raw !== 'string' || !raw.trim())
+            return [];
+        if (raw === this.lastImagesStr)
+            return this.lastParsed;
+        let parsed = [];
+        try {
+            const p = JSON.parse(raw);
+            if (Array.isArray(p))
+                parsed = p.filter((i) => i && i.src);
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        this.lastImagesStr = raw;
+        this.lastParsed = parsed;
+        return parsed;
+    }
+    componentWillLoad() {
+        this.index = this.clampIndex(this.startIndex);
+    }
+    connectedCallback() {
+        if (this.open)
+            this.attachKeyListener();
+    }
+    disconnectedCallback() {
+        this.detachKeyListener();
+    }
+    componentDidRender() {
+        var _a;
+        if (this.pendingFocus) {
+            this.pendingFocus = false;
+            (_a = this.closeBtnEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    onOpenChange(open) {
+        var _a, _b, _c;
+        if (open) {
+            this.index = this.clampIndex(this.startIndex);
+            this.resetView();
+            this.preloadNeighbors();
+            this.attachKeyListener();
+            // aria-modal dialog: move focus in on open, restore it on close.
+            this.previouslyFocused = (_a = document.activeElement) !== null && _a !== void 0 ? _a : undefined;
+            this.pendingFocus = true;
+        }
+        else {
+            this.detachKeyListener();
+            (_c = (_b = this.previouslyFocused) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+            this.previouslyFocused = undefined;
+        }
+    }
+    onStartIndexChange(v) {
+        if (this.open) {
+            this.index = this.clampIndex(v);
+            this.resetView();
+        }
+    }
+    onImagesChange() {
+        this.index = this.clampIndex(this.index);
+    }
+    // Manual capture-phase listener (not @Listen): while the viewer is open it
+    // must own the keyboard — an ancestor co-drawer/co-modal also listens for
+    // Escape on document, and without capture + stopPropagation one keypress
+    // would close both (losing unsaved drawer state). Capture runs first, and
+    // preventDefault keeps arrows/+/- from scrolling the page behind the scrim.
+    attachKeyListener() {
+        window.addEventListener('keydown', this.handleKey, { capture: true });
+    }
+    detachKeyListener() {
+        window.removeEventListener('keydown', this.handleKey, { capture: true });
+    }
+    /** Minimal focus trap: Tab cycles through the viewer's own buttons. */
+    trapTab(e) {
+        var _a, _b, _c;
+        const focusables = Array.from((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button')) !== null && _b !== void 0 ? _b : []);
+        if (focusables.length === 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const active = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement;
+        const i = focusables.indexOf(active);
+        const delta = e.shiftKey ? -1 : 1;
+        const next = focusables[(i + delta + focusables.length) % focusables.length];
+        next.focus();
+    }
+    clampIndex(i) {
+        const n = this.parsedImages.length;
+        if (n === 0)
+            return 0;
+        return Math.min(Math.max(0, i), n - 1);
+    }
+    resetView() {
+        this.scale = 1;
+        this.tx = 0;
+        this.ty = 0;
+        this.dragging = false;
+    }
+    goTo(delta) {
+        const n = this.parsedImages.length;
+        if (n < 2)
+            return;
+        this.index = (this.index + delta + n) % n;
+        this.resetView();
+        this.coChange.emit(this.index);
+        this.preloadNeighbors();
+    }
+    preloadNeighbors() {
+        const imgs = this.parsedImages;
+        if (imgs.length < 2)
+            return;
+        for (const d of [1, -1]) {
+            const neighbor = imgs[(this.index + d + imgs.length) % imgs.length];
+            if (neighbor === null || neighbor === void 0 ? void 0 : neighbor.src)
+                new Image().src = neighbor.src;
+        }
+    }
+    // ── Zoom / pan ────────────────────────────────────────────────
+    /** Pan is clamped so the scaled image can't be dragged fully off-stage. */
+    clampPan(tx, ty, scale) {
+        const stage = this.stageEl;
+        const img = this.imgEl;
+        if (!stage || !img)
+            return [tx, ty];
+        const maxTx = Math.max(0, (img.offsetWidth * scale - stage.clientWidth) / 2);
+        const maxTy = Math.max(0, (img.offsetHeight * scale - stage.clientHeight) / 2);
+        return [Math.min(Math.max(tx, -maxTx), maxTx), Math.min(Math.max(ty, -maxTy), maxTy)];
+    }
+    /**
+     * Zoom keeping the stage point (px,py — relative to the stage center) fixed:
+     * t' = p − (p − t)·(s'/s), with transform-origin at the center.
+     */
+    zoomAt(nextScale, px, py) {
+        const s = this.scale;
+        const ns = Math.min(Math.max(nextScale, MIN_SCALE), MAX_SCALE);
+        if (ns === s)
+            return;
+        const ratio = ns / s;
+        let tx = px - (px - this.tx) * ratio;
+        let ty = py - (py - this.ty) * ratio;
+        if (ns === MIN_SCALE) {
+            tx = 0;
+            ty = 0;
+        }
+        else {
+            [tx, ty] = this.clampPan(tx, ty, ns);
+        }
+        this.scale = ns;
+        this.tx = tx;
+        this.ty = ty;
+    }
+    stagePoint(e) {
+        var _a;
+        const rect = (_a = this.stageEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect)
+            return [0, 0];
+        return [e.clientX - rect.left - rect.width / 2, e.clientY - rect.top - rect.height / 2];
+    }
+    render() {
+        const s = getLightboxStrings(this.locale);
+        const imgs = this.parsedImages;
+        const img = imgs[this.index];
+        const multi = imgs.length > 1;
+        const counter = s.counter
+            .replace('{i}', String(this.index + 1))
+            .replace('{n}', String(imgs.length));
+        return (h("div", { key: 'bfffaae28680b214a562aa3c3ec52aaf16a61571', class: { 'co-lightbox': true, 'co-lightbox--open': this.open }, part: "overlay", role: "dialog", "aria-modal": "true", "aria-label": img === null || img === void 0 ? void 0 : img.alt, onClick: this.requestClose }, img && (h("div", { key: 'e1bed6448e4878d0e459bdda89d1da98712d8207', class: "co-lightbox__toolbar", part: "toolbar", onClick: this.stop }, h("span", { key: '7ff4d35aaa6c4207c2b623951f14802278e1c631', class: "co-lightbox__caption", title: img.alt }, img.alt), h("div", { key: 'bf369f9204faf17c9047c339d893933159078714', class: "co-lightbox__zoom" }, h("button", { key: '94aa9ab08f21bf7d9e77e4ad31325cd13a80bb4d', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomOut, title: s.zoomOut, onClick: () => this.zoomAt(this.scale / WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: 'd04c038ec26081190c67eedcccf8e4c61c8cf6d7', name: "minus", size: 16 })), h("button", { key: 'd4333d0c970e71012786915be49be6c0efada12f', class: "co-lightbox__btn co-lightbox__zoom-value", type: "button", "aria-label": s.zoomReset, title: s.zoomReset, onClick: () => this.resetView() }, Math.round(this.scale * 100), "%"), h("button", { key: 'b9efbf3e3912fb557eba59cce0300468a8e86861', class: "co-lightbox__btn", type: "button", "aria-label": s.zoomIn, title: s.zoomIn, onClick: () => this.zoomAt(this.scale * WHEEL_FACTOR, 0, 0) }, h("co-icon", { key: '1d56f6fca5858ba8413f378bc6ac63870663143a', name: "plus", size: 16 }))), h("button", { key: '0fc6adbb0b1c80cb2e8da9eb09dfe107349a59cf', class: "co-lightbox__btn", type: "button", "aria-label": s.openOriginal, title: s.openOriginal, onClick: this.openOriginal }, h("co-icon", { key: 'b1151b279b700caa0712ff74b09c0440d4b37dd4', name: "arrow-square-out", size: 16 })), h("button", { key: '984f9d2b9498d9715dabff254d2f3da9a42d9172', class: "co-lightbox__btn", part: "close", type: "button", "aria-label": s.close, title: s.close, ref: (el) => (this.closeBtnEl = el), onClick: this.requestClose }, h("co-icon", { key: '054e307f9116c8dca66412ae54dfee8e3a86da9b', name: "x", size: 16 })))), img && (h("div", { key: 'cd21ae63400375474fca02ebf77c35d4b4fd8b55', class: "co-lightbox__stage", ref: (el) => (this.stageEl = el), onWheel: this.handleWheel }, h("img", { key: 'b33b767ba92e4a1ed685409b1a96acc98767c4f7', class: {
+                'co-lightbox__img': true,
+                'co-lightbox__img--zoomed': this.scale > MIN_SCALE,
+                'co-lightbox__img--dragging': this.dragging,
+            }, part: "image", ref: (el) => (this.imgEl = el), src: img.src, alt: img.alt || '', draggable: false, style: { transform: `translate(${this.tx}px, ${this.ty}px) scale(${this.scale})` }, onClick: this.stop, onDblClick: this.handleDblClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp }))), img && multi && (h("button", { key: '0b35f47557bf3e05db3c98e0df2c6e8d6f5cef94', class: "co-lightbox__nav co-lightbox__nav--prev", part: "prev", type: "button", "aria-label": s.prevImage, title: s.prevImage, onClick: (e) => {
+                e.stopPropagation();
+                this.goTo(-1);
+            } }, h("co-icon", { key: 'f84159324fe97c957f0e8b2f0b92f865f180f7ed', name: "caret-left", size: 24 }))), img && multi && (h("button", { key: '7c1a9f250bb4b881112a57a2f3455b3c82fc77cc', class: "co-lightbox__nav co-lightbox__nav--next", part: "next", type: "button", "aria-label": s.nextImage, title: s.nextImage, onClick: (e) => {
+                e.stopPropagation();
+                this.goTo(1);
+            } }, h("co-icon", { key: '00efc2dd2e09c2dc1df35b6317e5bc42a63b2c20', name: "caret-right", size: 24 }))), img && multi && (h("div", { key: '7b148b3a2a1c3032c037439293b2b4c6e0100c52', class: "co-lightbox__counter", part: "counter", onClick: this.stop }, counter))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }],
+        "startIndex": [{
+                "onStartIndexChange": 0
+            }],
+        "images": [{
+                "onImagesChange": 0
+            }]
+    }; }
+};
+CoLightbox.style = coLightboxCss();
+
+export { CoLightbox as co_lightbox };

package/dist/esm/co-list-footer.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, c as createEvent, h } from './index-CYsftTKf.js';
+
+const coListFooterCss = () => `:host{display:block}.co-list-footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-list-footer__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-list-footer__btn:hover{opacity:0.85}.co-list-footer__btn:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:2px}.co-list-footer__btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-list-footer__btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}`;
+
+const CoListFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coPrimary = createEvent(this, "coPrimary", 7);
+        this.coSecondary = createEvent(this, "coSecondary", 7);
+        /** Primary action leading icon (Phosphor). Set to '' to hide the icon. */
+        this.primaryIcon = 'plus';
+        /** Secondary action leading icon (Phosphor). Set to '' to hide the icon. */
+        this.secondaryIcon = 'plus';
+        this.handlePrimary = () => this.coPrimary.emit();
+        this.handleSecondary = () => this.coSecondary.emit();
+    }
+    render() {
+        return (h("div", { key: '408e27a26e9d2d1802ba336690c84c745a79a22d', class: "co-list-footer", part: "footer" }, this.secondaryLabel && (h("button", { key: '9a597df6466ebf5c5720b50d0d4d2993ba3af9ab', class: "co-list-footer__btn co-list-footer__btn--secondary", type: "button", onClick: this.handleSecondary }, this.secondaryIcon && h("co-icon", { key: 'c743c1399b14d175c51ea553d508110e8bcaef05', name: this.secondaryIcon, size: 16 }), h("span", { key: '3c32ad1ea326da99debeb716980b38cf9777b168' }, this.secondaryLabel))), this.primaryLabel && (h("button", { key: 'ce57a3fe3456d4cd3959d556304de9de7558ec40', class: "co-list-footer__btn co-list-footer__btn--primary", type: "button", onClick: this.handlePrimary }, this.primaryIcon && h("co-icon", { key: '584416793ecbf91a960b2b55f54e703ba1d0ca5c', name: this.primaryIcon, size: 16 }), h("span", { key: 'f227d58236ab0f4d31b398cfc9bf7419efd57d02' }, this.primaryLabel))), h("slot", { key: '601ef71ed5374dab62a79ad875da9b6f7a0fcfed' })));
+    }
+};
+CoListFooter.style = coListFooterCss();
+
+export { CoListFooter as co_list_footer };

package/dist/esm/co-list-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
 
-const coListItemCss = () => `:host{display:block}.co-list-item{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-md) var(--co-spacing-lg);font-family:var(--co-font-family-primary);cursor:pointer;border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;box-sizing:border-box;min-height:40px}.co-list-item--dense{gap:var(--co-spacing-sm);padding:6px var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);min-height:32px}.co-list-item--dense .co-list-item__label{font-size:var(--co-font-size-14)}.co-list-item:hover:not(.co-list-item--disabled){background:var(--co-semantic-surface-hover)}.co-list-item--selected{background:var(--co-semantic-surface-muted)}.co-list-item--disabled{opacity:0.4;cursor:not-allowed}.co-list-item__prefix,.co-list-item__suffix{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-list-item__prefix:empty,.co-list-item__suffix:empty{display:none}.co-list-item__content{display:flex;flex-direction:column;flex:1;min-width:0}.co-list-item__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-default);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-list-item__description{font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
+const coListItemCss = () => `:host{display:block}.co-list-item{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-md) var(--co-spacing-lg);font-family:var(--co-font-family-primary);cursor:pointer;border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;box-sizing:border-box;min-height:40px}.co-list-item--dense{gap:var(--co-spacing-sm);padding:6px var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);min-height:32px}.co-list-item--dense .co-list-item__label{font-size:var(--co-font-size-14)}.co-list-item:hover:not(.co-list-item--disabled){background:var(--co-semantic-surface-hover)}.co-list-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-list-item--selected{background:var(--co-semantic-surface-muted)}.co-list-item--disabled{opacity:0.4;cursor:not-allowed}.co-list-item__prefix,.co-list-item__suffix{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-list-item__prefix:empty,.co-list-item__suffix:empty{display:none}.co-list-item__content{display:flex;flex-direction:column;flex:1;min-width:0}.co-list-item__content>.co-list-item__tip{min-width:0;max-width:100%}.co-list-item__label{display:block;font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-default);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-list-item__description{display:block;font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
 
 const CoListItem = class {
     constructor(hostRef) {
@@ -13,21 +13,87 @@ const CoListItem = class {
         /** Compact variant — tighter padding + smaller radius for dropdowns / menus
          *  (the default size is tuned for sidebar nav rows). */
         this.dense = false;
+        /** Whether the label / description is currently ellipsis-truncated (drives the tooltip). */
+        this.labelTruncated = false;
+        this.descTruncated = false;
+        // Drives co-tooltip's `disabled`: show the full-text tooltip ONLY when the
+        // label / description is actually ellipsis-truncated. Guarded writes prevent
+        // a render loop; read synchronously, so it's correct before co-tooltip reads
+        // `disabled` on the trigger's mouseenter.
+        this.measureTruncation = () => {
+            const l = this.labelEl ? this.labelEl.scrollWidth > this.labelEl.clientWidth + 1 : false;
+            const d = this.descEl ? this.descEl.scrollWidth > this.descEl.clientWidth + 1 : false;
+            if (l !== this.labelTruncated)
+                this.labelTruncated = l;
+            if (d !== this.descTruncated)
+                this.descTruncated = d;
+        };
         this.handleClick = () => {
             if (this.disabled)
                 return;
             this.coSelect.emit();
         };
+        // Keyboard operable like a native option/button: Enter or Space activates it
+        // (Space is prevented so the page doesn't scroll).
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+                event.preventDefault();
+                this.coSelect.emit();
+            }
+        };
+    }
+    componentDidLoad() {
+        // A ResizeObserver re-measures when the row gets its real width — e.g. a
+        // top-layer popover panel going from display:none to shown (where a one-shot
+        // load-time measure would read 0) — and on any later resize.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.ro = new ResizeObserver(() => this.measureTruncation());
+            if (this.labelEl)
+                this.ro.observe(this.labelEl);
+            if (this.descEl)
+                this.ro.observe(this.descEl);
+        }
+        this.measureTruncation();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.ro = undefined;
+    }
+    // A width-stable text swap (same column, new text) won't trip the
+    // ResizeObserver — re-measure on prop change; rAF so the DOM holds the new
+    // text first.
+    onTextChange() {
+        requestAnimationFrame(this.measureTruncation);
     }
     render() {
-        return (h("div", { key: 'd33007d04b1c3d85465715cf0d8899f565db8a55', class: {
+        return (h("div", { key: '984e2c7fcb5f4124c871dda103e450b858143c0f', class: {
                 'co-list-item': true,
                 'co-list-item--selected': this.selected,
                 'co-list-item--disabled': this.disabled,
                 'co-list-item--dense': this.dense,
                 'co-list-item--has-description': !!this.description,
-            }, part: "item", role: "option", "aria-selected": this.selected ? 'true' : 'false', onClick: this.handleClick }, h("span", { key: '6c75c653a89cd7a32ec0b942e1960b71e5fa0d8f', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: 'bcfff961805fe5637a7ae21b9b81f90338a8903f', name: this.icon, size: 18 }), h("slot", { key: '271b3820399dc30e6401b679302e23b4fe02452a', name: "prefix" })), h("div", { key: '0fd1a2012e58309619586e2aaaca0020ed1acf6e', class: "co-list-item__content" }, this.label && h("span", { key: 'a0d4b2f9c0fbdbcd845839dac939bda59c3b100f', class: "co-list-item__label" }, this.label), this.description && h("span", { key: 'f674f27bf5ac21a8cb92843bf80045014d86cf2d', class: "co-list-item__description" }, this.description), h("slot", { key: 'ee35575016ff414f343255dd652d1a1cf5c01a5d' })), h("span", { key: '348369d7f90b489bf098520c5ddc5135dc6b3c37', class: "co-list-item__suffix" }, h("slot", { key: 'bed7564f82ac2198b04459d777019b7f722b22f3', name: "suffix" }))));
+            }, part: "item", role: "option", tabindex: this.disabled ? -1 : 0, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'd1a3466d6ecc565435d3918a596bc7620cce2197', class: "co-list-item__prefix" }, this.icon && h("co-icon", { key: '2374265eac83fb8d86ee26ab3317da2c2c9d2998', name: this.icon, size: 18 }), h("slot", { key: '6bb538d2212c2bd25d61c54a59120295ff55692b', name: "prefix" })), h("div", { key: '052ed53fb59580780a0d1c2b1dbdff7711fbb585', class: "co-list-item__content" }, this.label && (h("co-tooltip", { key: '027cb3026c0ac2efdfb76f7eeb9600d21899e865', block: true, class: "co-list-item__tip", content: this.label, placement: "top", disabled: !this.labelTruncated }, h("span", { key: '3b27db5590486bab2c4b8819548dbb13c332a13b', class: "co-list-item__label", ref: (el) => {
+                this.labelEl = el;
+                if (el && this.ro)
+                    this.ro.observe(el);
+            } }, this.label))), this.description && (h("co-tooltip", { key: '220243aafd77d681315f0847cb3db72110330b7e', block: true, class: "co-list-item__tip", content: this.description, placement: "top", disabled: !this.descTruncated }, h("span", { key: 'fb8543457be7e67c7eca8461f207dad833503462', class: "co-list-item__description", ref: (el) => {
+                this.descEl = el;
+                if (el && this.ro)
+                    this.ro.observe(el);
+            } }, this.description))), h("slot", { key: 'ed7e997155bec808ef01c6300109f435a5e698b1' })), h("span", { key: '1601e81a0d25f685b69ebea30a13b1dac9337866', class: "co-list-item__suffix" }, h("slot", { key: 'f23ac07bc12c9a02810574bcb30b2a323b07b3ee', name: "suffix" }))));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "label": [{
+                "onTextChange": 0
+            }],
+        "description": [{
+                "onTextChange": 0
+            }]
+    }; }
 };
 CoListItem.style = coListItemCss();