@prolibu-suite/cobalt-core 0.5.0 → 0.7.0

package/dist/cjs/co-carousel.cjs.entry.js

@@ -0,0 +1,368 @@
+'use strict';
+
+var index = require('./index-kBiXCEE7.js');
+var dateI18n = require('./dateI18n-BdiNAl0_.js');
+
+/**
+ * Built-in UI string dictionary for co-carousel (aria labels).
+ * Same strategy as lightboxI18n/dateI18n: ships es/en/pt keyed by the
+ * `locale` prop. Templates use `{i}` / `{n}` placeholders.
+ */
+const DICT = {
+    es: {
+        prevSlide: 'Diapositiva anterior',
+        nextSlide: 'Diapositiva siguiente',
+        goToSlide: 'Ir a la diapositiva {i}',
+        pickSlide: 'Elegir diapositiva',
+        carouselLabel: 'Carrusel',
+        slideLabel: '{i} de {n}',
+    },
+    en: {
+        prevSlide: 'Previous slide',
+        nextSlide: 'Next slide',
+        goToSlide: 'Go to slide {i}',
+        pickSlide: 'Choose slide',
+        carouselLabel: 'Carousel',
+        slideLabel: '{i} of {n}',
+    },
+    pt: {
+        prevSlide: 'Slide anterior',
+        nextSlide: 'Próximo slide',
+        goToSlide: 'Ir para o slide {i}',
+        pickSlide: 'Escolher slide',
+        carouselLabel: 'Carrossel',
+        slideLabel: '{i} de {n}',
+    },
+};
+/** Resolve the built-in UI strings for a locale. */
+function getCarouselStrings(locale) {
+    return DICT[dateI18n.langFromLocale(locale)];
+}
+
+const coCarouselCss = () => `:host{display:block;font-family:var(--co-font-family-primary);--co-carousel-arrow-size:36px;--co-carousel-arrow-bg:var(--co-semantic-surface-page);--co-carousel-arrow-color:var(--co-semantic-text-default);--co-carousel-dot-size:6px;--co-carousel-dot-color:var(--co-semantic-border-default);--co-carousel-dot-active-color:var(--co-semantic-text-default);--co-carousel-transition:320ms cubic-bezier(0.25, 0.8, 0.4, 1)}.co-carousel{position:relative;width:100%;outline:none}.co-carousel:focus-visible{outline:2px solid var(--co-semantic-border-focus-ring);outline-offset:2px;border-radius:var(--co-border-radius-sm)}.co-carousel--16-9{aspect-ratio:16 / 9}.co-carousel--4-3{aspect-ratio:4 / 3}.co-carousel--1-1{aspect-ratio:1 / 1}.co-carousel--21-9{aspect-ratio:21 / 9}.co-carousel--auto{aspect-ratio:unset}.co-carousel--16-9 .co-carousel__viewport,.co-carousel--4-3 .co-carousel__viewport,.co-carousel--1-1 .co-carousel__viewport,.co-carousel--21-9 .co-carousel__viewport{position:absolute;inset:0}.co-carousel__viewport{overflow:hidden;width:100%;height:100%;touch-action:pan-y}.co-carousel__track{display:flex;width:100%;height:100%;transition:transform var(--co-carousel-transition);will-change:transform}@media (prefers-reduced-motion: reduce){.co-carousel__track{transition:none}}.co-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--co-carousel-arrow-size);height:var(--co-carousel-arrow-size);display:flex;align-items:center;justify-content:center;border:1px solid var(--co-semantic-border-subtle);border-radius:50%;background:var(--co-carousel-arrow-bg);color:var(--co-carousel-arrow-color);cursor:pointer;padding:0;opacity:0.9;transition:opacity 120ms ease, background 120ms ease;z-index:1}.co-carousel__arrow:hover{opacity:1;background:var(--co-semantic-surface-hover)}.co-carousel__arrow:focus-visible{outline:2px solid var(--co-semantic-border-focus-ring);outline-offset:1px}.co-carousel__arrow--prev{left:var(--co-spacing-sm, 8px)}.co-carousel__arrow--next{right:var(--co-spacing-sm, 8px)}.co-carousel__arrow--disabled{opacity:0.35;cursor:default;pointer-events:none}.co-carousel__dots{position:absolute;left:50%;bottom:var(--co-spacing-sm, 8px);transform:translateX(-50%);display:flex;gap:6px;padding:6px 10px;border-radius:var(--co-border-radius-xl);background:color-mix(in srgb, var(--co-semantic-surface-page) 65%, transparent);backdrop-filter:blur(4px);z-index:1}.co-carousel__dot{width:var(--co-carousel-dot-size);height:var(--co-carousel-dot-size);border-radius:50%;border:none;padding:0;background:var(--co-carousel-dot-color);cursor:pointer;transition:background 120ms ease, width 200ms ease}.co-carousel__dot--active{background:var(--co-carousel-dot-active-color);width:calc(var(--co-carousel-dot-size) * 2.6);border-radius:var(--co-border-radius-xl)}.co-carousel__dot:focus-visible{outline:2px solid var(--co-semantic-border-focus-ring);outline-offset:1px}`;
+
+const CoCarousel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coSlideChange = index.createEvent(this, "coSlideChange", 7);
+        /** Active slide index */
+        this.value = 0;
+        /** Auto-advance slides */
+        this.autoplay = false;
+        /** Autoplay interval in milliseconds (floored at 1000) */
+        this.interval = 6000;
+        /** Wrap around at the ends */
+        this.loop = true;
+        /** Show prev/next arrows */
+        this.arrows = true;
+        /** Show dot indicators */
+        this.dots = true;
+        /** Pause autoplay while hovered */
+        this.pauseOnHover = true;
+        /** Enable pointer swipe navigation */
+        this.swipe = true;
+        /** Container aspect ratio */
+        this.aspectRatio = 'auto';
+        /** Language for aria labels (es/en/pt, accepts full locales) */
+        this.locale = 'es';
+        this.itemCount = 0;
+        this.dragDx = 0;
+        this.dragging = false;
+        /** True while the autoplay interval is actually running (drives aria-live). */
+        this.rotating = false;
+        this.hovering = false;
+        this.focusWithin = false;
+        this.reducedMotion = false;
+        this.pointerStartX = 0;
+        this.pointerStartY = 0;
+        this.pointerId = -1;
+        this.suppressClick = false;
+        this.handleSlotChange = () => {
+            // Vue renders slides async: re-count on every slot mutation.
+            this.refreshItems();
+        };
+        this.handleVisibilityChange = () => {
+            if (document.hidden) {
+                this.stopAutoplay();
+            }
+            else {
+                this.restartAutoplay();
+            }
+        };
+        this.handleMotionChange = (e) => {
+            this.reducedMotion = e.matches;
+            this.restartAutoplay();
+        };
+        this.handleMouseEnter = () => {
+            this.hovering = true;
+            if (this.pauseOnHover)
+                this.stopAutoplay();
+        };
+        this.handleMouseLeave = () => {
+            this.hovering = false;
+            this.restartAutoplay();
+        };
+        // Keyboard users get the same pause treatment as hover: rotation stops
+        // while focus is anywhere inside the carousel (focusin/focusout bubble,
+        // including from slotted light-DOM content).
+        this.handleFocusIn = () => {
+            this.focusWithin = true;
+            this.stopAutoplay();
+        };
+        this.handleFocusOut = (e) => {
+            if (e.relatedTarget && this.el.contains(e.relatedTarget))
+                return;
+            this.focusWithin = false;
+            this.restartAutoplay();
+        };
+        // ── Swipe (umbral de drag para no romper clicks de CTA) ──
+        this.handlePointerDown = (e) => {
+            // While a captured drag is in flight, a second touch must not hijack the
+            // gesture tracking (it would jump the track and swallow the active drag).
+            if (this.dragging)
+                return;
+            if (!this.swipe || this.itemCount <= 1 || (e.pointerType === 'mouse' && e.button !== 0))
+                return;
+            // New gesture starts clean: a stale flag from a swipe whose trailing click
+            // never fired must not poison this gesture's tap.
+            this.suppressClick = false;
+            this.pointerId = e.pointerId;
+            this.pointerStartX = e.clientX;
+            this.pointerStartY = e.clientY;
+            this.dragDx = 0;
+        };
+        this.handlePointerMove = (e) => {
+            var _a;
+            if (e.pointerId !== this.pointerId)
+                return;
+            const dx = e.clientX - this.pointerStartX;
+            const dy = e.clientY - this.pointerStartY;
+            if (!this.dragging) {
+                // Slop: ignore until clearly horizontal, so taps and vertical scroll win.
+                if (Math.abs(dx) < CoCarousel.DRAG_SLOP || Math.abs(dx) < Math.abs(dy))
+                    return;
+                this.dragging = true;
+                (_a = this.viewportEl) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
+            }
+            this.dragDx = dx;
+        };
+        this.handlePointerUp = (e) => {
+            var _a;
+            if (e.pointerId !== this.pointerId)
+                return;
+            this.pointerId = -1;
+            if (!this.dragging)
+                return;
+            const dx = this.dragDx;
+            this.dragging = false;
+            this.dragDx = 0;
+            this.suppressClick = true;
+            (_a = this.viewportEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
+            if (dx <= -CoCarousel.SWIPE_THRESHOLD) {
+                this.advance(1);
+            }
+            else if (dx >= CoCarousel.SWIPE_THRESHOLD) {
+                this.advance(-1);
+            }
+            this.restartAutoplay();
+        };
+        this.handlePointerCancel = (e) => {
+            if (e.pointerId !== this.pointerId)
+                return;
+            this.pointerId = -1;
+            this.dragging = false;
+            this.dragDx = 0;
+            this.suppressClick = false;
+        };
+        this.handleClickCapture = (e) => {
+            // Swallow the click that follows a drag so CTAs inside slides
+            // don't fire after a swipe.
+            if (this.suppressClick) {
+                this.suppressClick = false;
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        // ── Keyboard ────────────────────────────────────
+        this.handleKeyDown = (e) => {
+            if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                this.advance(1);
+            }
+            else if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                this.advance(-1);
+            }
+        };
+    }
+    // ── Lifecycle ───────────────────────────────────
+    componentWillLoad() {
+        var _a, _b;
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            this.motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+            this.reducedMotion = this.motionQuery.matches;
+            (_b = (_a = this.motionQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'change', this.handleMotionChange);
+        }
+    }
+    componentDidLoad() {
+        this.refreshItems();
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+        this.restartAutoplay();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.stopAutoplay();
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        (_b = (_a = this.motionQuery) === null || _a === void 0 ? void 0 : _a.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'change', this.handleMotionChange);
+    }
+    // ── Watchers ────────────────────────────────────
+    watchValue() {
+        const clamped = this.clampIndex(this.value);
+        if (clamped !== this.value) {
+            this.value = clamped;
+            return;
+        }
+        this.syncItems();
+    }
+    watchLocale() {
+        this.syncItems();
+    }
+    watchAutoplay() {
+        this.restartAutoplay();
+    }
+    // ── Public methods ──────────────────────────────
+    async next() {
+        this.advance(1);
+    }
+    async prev() {
+        this.advance(-1);
+    }
+    async goTo(index) {
+        this.setActive(this.clampIndex(index));
+    }
+    // ── Items (light DOM, patrón co-tab-group) ─────
+    getItems() {
+        // :scope > : solo hijos directos — un carrusel anidado dentro de un slide
+        // no debe aportar sus items al conteo/aria del padre.
+        return Array.from(this.el.querySelectorAll(':scope > co-carousel-item'));
+    }
+    refreshItems() {
+        const items = this.getItems();
+        this.itemCount = items.length;
+        if (this.value > 0 && this.value >= this.itemCount) {
+            this.value = Math.max(0, this.itemCount - 1);
+        }
+        this.syncItems();
+        this.restartAutoplay();
+    }
+    syncItems() {
+        const items = this.getItems();
+        const n = items.length;
+        const s = getCarouselStrings(this.locale);
+        items.forEach((item, i) => {
+            const active = i === this.value;
+            item.setAttribute('aria-label', s.slideLabel.replace('{i}', String(i + 1)).replace('{n}', String(n)));
+            item.setAttribute('aria-hidden', active ? 'false' : 'true');
+            item.toggleAttribute('inert', !active);
+        });
+    }
+    // ── Navigation ──────────────────────────────────
+    clampIndex(i) {
+        if (this.itemCount === 0)
+            return 0;
+        return Math.max(0, Math.min(this.itemCount - 1, i));
+    }
+    setActive(index) {
+        if (index === this.value || index < 0 || index >= this.itemCount)
+            return;
+        this.value = index;
+        this.coSlideChange.emit(index);
+    }
+    advance(dir) {
+        if (this.itemCount <= 1)
+            return;
+        let next = this.value + dir;
+        if (next >= this.itemCount) {
+            if (!this.loop)
+                return;
+            next = 0;
+        }
+        else if (next < 0) {
+            if (!this.loop)
+                return;
+            next = this.itemCount - 1;
+        }
+        this.setActive(next);
+    }
+    // ── Autoplay ────────────────────────────────────
+    restartAutoplay() {
+        this.stopAutoplay();
+        if (!this.autoplay || this.itemCount <= 1 || this.reducedMotion)
+            return;
+        if (this.pauseOnHover && this.hovering)
+            return;
+        if (this.focusWithin)
+            return;
+        if (typeof document !== 'undefined' && document.hidden)
+            return;
+        this.timer = setInterval(() => {
+            if (this.dragging)
+                return;
+            if (!this.loop && this.value >= this.itemCount - 1) {
+                this.stopAutoplay();
+                return;
+            }
+            this.advance(1);
+        }, Math.max(1000, this.interval));
+        this.rotating = true;
+    }
+    stopAutoplay() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+        this.rotating = false;
+    }
+    // ── Render ──────────────────────────────────────
+    render() {
+        const s = getCarouselStrings(this.locale);
+        const multi = this.itemCount > 1;
+        const canPrev = this.loop || this.value > 0;
+        const canNext = this.loop || this.value < this.itemCount - 1;
+        const aspectClass = `co-carousel--${this.aspectRatio.replace(':', '-')}`;
+        const trackStyle = {
+            transform: this.dragging
+                ? `translateX(calc(${-this.value * 100}% + ${this.dragDx}px))`
+                : `translateX(${-this.value * 100}%)`,
+        };
+        if (this.dragging)
+            trackStyle.transition = 'none';
+        return (index.h(index.Host, { key: '29c8bdeb6a2c402aa46e6a1b3a442abbb8f9967c' }, index.h("div", { key: '5a57b4b999cdac0def308039ba0a4edcfba9adf5', class: { 'co-carousel': true, [aspectClass]: true }, part: "container", role: "region", "aria-roledescription": "carousel", "aria-label": s.carouselLabel, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, index.h("div", { key: 'a20cec4e9d8144868ac4f53f72d536272def9119', class: "co-carousel__viewport", part: "viewport", ref: el => (this.viewportEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, onClickCapture: this.handleClickCapture }, index.h("div", { key: '98755bee7cd2d8da45a8ffb2abcd048f0de440ad', class: "co-carousel__track", part: "track", style: trackStyle, "aria-live": this.rotating ? 'off' : 'polite' }, index.h("slot", { key: 'a3e9a2bffb93be5ebb60ba61130ab362f3793ccb', onSlotchange: this.handleSlotChange }))), this.arrows && multi && (index.h("button", { key: '516649b789c44ba235991f6fe3c6aab2a6a2fcf7', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--prev': true, 'co-carousel__arrow--disabled': !canPrev }, part: "arrow-prev", type: "button", "aria-label": s.prevSlide, disabled: !canPrev, onClick: () => this.advance(-1) }, index.h("co-icon", { key: 'ffcddd1e02ce1d699052290e8df6ab2463b27a20', name: "caret-left", size: 18, weight: "bold" }))), this.arrows && multi && (index.h("button", { key: 'a7d6989b1c18d3598dc6c7c9e6606b2cf31fc026', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--next': true, 'co-carousel__arrow--disabled': !canNext }, part: "arrow-next", type: "button", "aria-label": s.nextSlide, disabled: !canNext, onClick: () => this.advance(1) }, index.h("co-icon", { key: '9e26adf68047395cd0cb265cfeaba3b4af6b950e', name: "caret-right", size: 18, weight: "bold" }))), this.dots && multi && (
+        // APG grouped-carousel picker pattern: plain always-tabbable
+        // buttons in a labelled group (tablist/tab would demand
+        // aria-controls + roving tabindex we don't implement).
+        index.h("div", { key: 'd64ee6b57da49e5025c6f5a6faa3f58ba6855f49', class: "co-carousel__dots", part: "dots", role: "group", "aria-label": s.pickSlide }, Array.from({ length: this.itemCount }, (_, i) => (index.h("button", { class: { 'co-carousel__dot': true, 'co-carousel__dot--active': i === this.value }, part: "dot", type: "button", "aria-current": i === this.value ? 'true' : undefined, "aria-label": s.goToSlide.replace('{i}', String(i + 1)), onClick: () => this.setActive(i) }))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }],
+        "locale": [{
+                "watchLocale": 0
+            }],
+        "autoplay": [{
+                "watchAutoplay": 0
+            }],
+        "interval": [{
+                "watchAutoplay": 0
+            }]
+    }; }
+};
+/** Minimum horizontal travel (px) before a pointer gesture counts as a drag. */
+CoCarousel.DRAG_SLOP = 8;
+/** Horizontal travel (px) needed to change slide on release. */
+CoCarousel.SWIPE_THRESHOLD = 40;
+CoCarousel.style = coCarouselCss();
+
+exports.co_carousel = CoCarousel;

package/dist/cjs/co-checkbox-group.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
 const coCheckboxGroupCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-checkbox-group{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-checkbox-group__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-checkbox-group__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-checkbox-group--disabled .co-checkbox-group__label,.co-checkbox-group--disabled .co-checkbox-group__secondary-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__options{display:flex;gap:var(--co-spacing-md)}.co-checkbox-group__options--column{flex-direction:column;gap:var(--co-spacing-sm2)}.co-checkbox-group__options--row{flex-direction:row;flex-wrap:wrap;gap:var(--co-spacing-md)}.co-checkbox-group__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer;user-select:none}.co-checkbox-group__item--disabled{cursor:not-allowed}.co-checkbox-group__option-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap}.co-checkbox-group__item--disabled .co-checkbox-group__option-label{color:var(--co-semantic-text-disabled)}.co-checkbox-group__box{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease;overflow:hidden}.co-checkbox-group__box--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs)}.co-checkbox-group__box--large{width:24px;height:24px;border-radius:var(--co-spacing-sm)}.co-checkbox-group__box:not(.co-checkbox-group__box--checked){background:color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle)}.co-checkbox-group__box--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox-group__box--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox-group__box--small.co-checkbox-group__box--checked::after{width:7px;height:4px}.co-checkbox-group__box--large.co-checkbox-group__box--checked::after{width:10px;height:6px}.co-checkbox-group__box--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-checkbox-group--error .co-checkbox-group__box:not(.co-checkbox-group__box--checked){border-color:var(--co-semantic-status-error)}.co-checkbox-group__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-checkbox-group__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-checkbox-group__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-checkbox-group__helper--error .co-checkbox-group__helper-icon,.co-checkbox-group__helper--error .co-checkbox-group__helper-text{color:var(--co-semantic-status-error)}.co-checkbox-group__helper--success .co-checkbox-group__helper-icon,.co-checkbox-group__helper--success .co-checkbox-group__helper-text{color:var(--co-semantic-status-success)}.co-checkbox-group__helper--warning .co-checkbox-group__helper-icon,.co-checkbox-group__helper--warning .co-checkbox-group__helper-text{color:var(--co-color-status-review)}.co-checkbox-group__helper--info .co-checkbox-group__helper-icon,.co-checkbox-group__helper--info .co-checkbox-group__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-checkbox-group{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-checkbox-group__labels{grid-column:1;grid-row:1;padding-top:0;min-width:0}:host([layout='horizontal']) .co-checkbox-group__label{white-space:normal}:host([layout='horizontal']) .co-checkbox-group>:not(.co-checkbox-group__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-checkbox-group__box:not(.co-checkbox-group__box--checked){background:transparent}}`;
 

package/dist/cjs/co-checkbox.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 
 const coCheckboxCss = () => `:host{display:inline-flex;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-checkbox-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);cursor:pointer}.co-checkbox-row--disabled{cursor:not-allowed}.co-checkbox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;user-select:none}.co-checkbox-row--disabled .co-checkbox__label{color:var(--co-semantic-text-disabled)}.co-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;padding:0;overflow:hidden;flex-shrink:0;box-sizing:border-box;transition:background 0.15s ease, border-color 0.15s ease}.co-checkbox--small{width:16px;height:16px;border-radius:var(--co-border-radius-xxs);}.co-checkbox--medium{width:20px;height:20px;border-radius:var(--co-spacing-sm);}.co-checkbox--large{width:24px;height:24px;border-radius:var(--co-spacing-sm);}.co-checkbox:not(.co-checkbox--checked){background:color-mix(in srgb, var(--co-semantic-surface-secondary) 35%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle)}.co-checkbox--checked{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--checked::after{content:'';display:block;box-sizing:border-box;border-style:solid;border-color:var(--co-semantic-on-primary);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-15%)}.co-checkbox--small.co-checkbox--checked::after{width:7px;height:4px}.co-checkbox--medium.co-checkbox--checked::after{width:8px;height:5px}.co-checkbox--large.co-checkbox--checked::after{width:10px;height:6px}.co-checkbox--indeterminate{background:var(--co-semantic-surface-primary);border:none}.co-checkbox--indeterminate::after{content:'';display:block;background:var(--co-semantic-on-primary);border-radius:1px}.co-checkbox--small.co-checkbox--indeterminate::after{width:8px;height:1.5px}.co-checkbox--medium.co-checkbox--indeterminate::after{width:10px;height:1.75px}.co-checkbox--large.co-checkbox--indeterminate::after{width:12px;height:2px}.co-checkbox--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-checkbox--overlay{border-radius:6px}.co-checkbox--overlay.co-checkbox--small{width:20px;height:20px;border-radius:6px}.co-checkbox--overlay.co-checkbox--medium,.co-checkbox--overlay.co-checkbox--large{width:22px;height:22px;border-radius:6px}.co-checkbox--overlay:not(.co-checkbox--checked):not(.co-checkbox--indeterminate){background:rgba(255, 255, 255, 0.9);box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(31, 28, 27, 0.16));border:none}.co-checkbox--overlay.co-checkbox--checked,.co-checkbox--overlay.co-checkbox--indeterminate{background:var(--co-color-primary-azul, #2563eb);border:none;box-shadow:none}.co-checkbox--overlay.co-checkbox--checked::after,.co-checkbox--overlay.co-checkbox--indeterminate::after{content:none}.co-checkbox__glyph{display:block;width:100%;height:100%;pointer-events:none}@supports not (background: color-mix(in srgb, red, transparent)){.co-checkbox:not(.co-checkbox--checked){background:transparent}}`;
 
@@ -44,17 +44,17 @@ const CoCheckbox = class {
         // Only override the fill when a custom color is provided AND the box is "on".
         // Leaving this undefined keeps the default appearance byte-identical to before.
         const boxStyle = this.onColor && isOn ? { background: this.onColor } : undefined;
-        return (index.h("div", { key: 'b52aa4d0412e9ab8b170f11d7a323bbbc80057e5', class: {
+        return (index.h("div", { key: '7d7318c97238d5784bc5e97b4d062324567f4298', class: {
                 'co-checkbox-row': true,
                 'co-checkbox-row--disabled': this.disabled,
-            }, onClick: this.handleClick }, index.h("span", { key: 'd3a1caff03ad0358ea005bcb88a8ad607e9d3d24', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
+            }, onClick: this.handleClick }, index.h("span", { key: '6a9eb80dd31b3fdcbad3fd5375c24a7039d7ed91', role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : String(this.checked), "aria-label": this.label || '', class: {
                 'co-checkbox': true,
                 [`co-checkbox--${this.size}`]: true,
                 'co-checkbox--overlay': isOverlay,
                 'co-checkbox--checked': this.checked && !this.indeterminate,
                 'co-checkbox--indeterminate': this.indeterminate,
                 'co-checkbox--disabled': this.disabled,
-            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (index.h("svg", { key: 'e6783c1035b4c9f8bb529b4a8f7efc75d9bb093a', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '19c92d5cd4cbda22338c1a675cabf444e5f58bfc', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (index.h("svg", { key: 'b84d28ddb24652658b0afc88bafce1a3ae7a83c6', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: 'b5e21ca2634667abca82f16d30a6952ab8ccbc88', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (index.h("span", { key: 'f311bec251f6fd375d81dcd06cafdb380d6206f0', class: "co-checkbox__label", part: "label" }, this.label))));
+            }, style: boxStyle, part: "box" }, isOverlay && this.indeterminate && (index.h("svg", { key: 'ea2fc2c66f3fdf9a385d30fe1c15a50196d61502', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '9a0c46128e14f5e62e956f51d292f8d59aa23bee', d: "M3 8h10", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round" }))), isOverlay && this.checked && !this.indeterminate && (index.h("svg", { key: '5898d1b96e97a2ba71bd80ef4ee9446a1250e88e', class: "co-checkbox__glyph", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '9dcac76996e654417555489e7d2c1467848ca242', d: "M3.5 8.5l3 3 6-6.5", stroke: "#fff", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.label && (index.h("span", { key: '3833a6596021f89ac26cd5201911d8fa4ca2f19a', class: "co-checkbox__label", part: "label" }, this.label))));
     }
 };
 CoCheckbox.style = coCheckboxCss();

package/dist/cjs/co-chip_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 var normalizeText = require('./normalizeText-B-v-XPKf.js');
 var overlayScroll = require('./overlayScroll-ifzDNeyb.js');
 require('./overlayscrollbars-BlBHo2Xx.js');
@@ -76,7 +76,7 @@ const CoChip = class {
         else
             effectiveIconMode = 'none';
         const Tag = this.clickable ? 'button' : 'div';
-        return (index.h(Tag, { key: '3210b69426aa37cc7e1f9cc7d7a9add9fd0dd93b', class: {
+        return (index.h(Tag, { key: '05440263b3d6ba10c01b5c85e345dcaa121e3237', class: {
                 'co-chip': true,
                 [`co-chip--${this.shape}`]: true,
                 [`co-chip--${this.size}`]: true,
@@ -86,7 +86,7 @@ const CoChip = class {
                 'co-chip--clickable': this.clickable,
                 'co-chip--disabled': this.disabled,
                 'co-chip--selected': this.selected,
-            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (index.h("span", { key: '105306abb8267ebec6a4241b85be844ce9e0fe9e', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, index.h("co-icon", { key: 'a6e6bbf79ec321916bae16fea448b63f22109bd0', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (index.h("span", { key: '6ddd3f25eca0380831c10fce157aa042d5195da5', class: "co-chip__icon-left", part: "icon-left" }, index.h("co-icon", { key: 'd331947abb472bede535a794dfae052a021d06b1', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (index.h("span", { key: 'ddf803655d633a17901ecab726739ad69ae03d5c', class: "co-chip__icon-left", part: "icon-left" }, index.h("slot", { key: '4602a3f28aa74f31bd7a5124b9ef1a1337f4d960', name: "icon-left" }))), index.h("span", { key: 'aebc08bb058e32d13ef3c962e1cf23cfdbc3baf5', class: "co-chip__label" }, index.h("slot", { key: 'be0e8625634f0b4a9da70944e32bb7d2c80c3a00' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (index.h("span", { key: '11634b783e3a482fe161781658fd22d0ec015265', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (index.h("span", { key: '49837e189f540874558c337bce19a983a5bd77f2', class: "co-chip__icon-right", part: "icon-right" }, index.h("co-icon", { key: '6510c33b909da03ef0e6ee59fb52b5c12a5faa86', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (index.h("span", { key: '9c6e6ccea304803daaecf447a5651d5e8a67cc07', class: "co-chip__icon-right", part: "icon-right" }, index.h("slot", { key: '3bdd7c888bba838894b88a41039df45af8f7547c', name: "icon-right" }))), this.removable && (index.h("span", { key: 'a4d45167d0c3fc237692371a131af5a76840a89a', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, index.h("co-icon", { key: 'ce146e623ce90a936c54a8bfad349b7ea04691fa', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (index.h("span", { key: 'fe01795e08be25909f530d6da4f57cb38b6f8a8e', class: "co-chip__trailing", part: "trailing" }, index.h("co-icon", { key: '2d8c0bba14a8fa9128c9f9673d9d295f191f1e5c', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
+            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (index.h("span", { key: 'd71d63015f9a594587f146cc041032381b22d369', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, index.h("co-icon", { key: 'fbf6114ccdbac2b6f7cce84d98b5d695a141bcd1', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (index.h("span", { key: 'db9984dcec5a53b9ddbd3d535031b46e25477b83', class: "co-chip__icon-left", part: "icon-left" }, index.h("co-icon", { key: 'cd745b03f23e86da95bc0eba975ebc3764b9661c', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (index.h("span", { key: '696a9b35c06a12b107cff95192e01584e167f147', class: "co-chip__icon-left", part: "icon-left" }, index.h("slot", { key: 'c485bf176b6f45ad04de0ce40e76c3fee9810a44', name: "icon-left" }))), index.h("span", { key: '30f93d2f29ced9dc817619f9b83c7e12e69c6664', class: "co-chip__label" }, index.h("slot", { key: '3e103e98d2557ac3fa9eb130a1ddac431c2005d3' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (index.h("span", { key: '65bd6af3007737372daef2afe379820ccc8addef', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (index.h("span", { key: 'acac0c84b83a53ad1fb9b22143ae2f31701ac226', class: "co-chip__icon-right", part: "icon-right" }, index.h("co-icon", { key: '60ad2e85d2c5658b3c4be23709c9aca6578fc4ac', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (index.h("span", { key: '020918e258d6d24b1a7d9f40dc8b90f31ce85690', class: "co-chip__icon-right", part: "icon-right" }, index.h("slot", { key: '1fdd279b5f3c8b24c8a6668441e09b6c3e90f900', name: "icon-right" }))), this.removable && (index.h("span", { key: '46bc990ba24fcf03ae0eb8f32797908c728ccddd', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, index.h("co-icon", { key: 'f18f1110893d39b013bb4d8f4bea117f107a8509', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (index.h("span", { key: '08ec959ca465adf3ac138336c7511293874bf540', class: "co-chip__trailing", part: "trailing" }, index.h("co-icon", { key: 'cd706e153280db4f0a4aa039e569d4cc123b8348', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
     }
 };
 CoChip.style = coChipCss();
@@ -466,11 +466,11 @@ const CoOptionList = class {
         const selectedIds = this.selectedIds;
         const { hasMore, remaining } = deriveMore(this.parsedItems.length, this.total, this.hasMore);
         const showClear = !!this.clearOptionLabel && selectedIds.length > 0;
-        return (index.h("div", { key: 'f6262519bd90bb9a419daeb9a1386147396a79ff', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (index.h("div", { key: '081a2cfee9a8a903c6bd2a2f0bd06cbac635c021', class: "co-option-list__search", part: "search" }, index.h("co-icon", { key: 'a001c71f5de00288907cde1e123f8d393e052a9e', name: "magnifying-glass", size: 16 }), index.h("input", { key: '355520b7d77077e02666fcd5012f36c648eaeacf', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), index.h("div", { key: '833708f614d3f561ba45bf1656f4bcfa6701b8ce', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, index.h("div", { key: '10da99a56133af0748f43c20af62e03e975aebcd', class: "co-option-list__inner" }, showClear && (index.h("button", { key: '208bc13eb8e89c88657022fbc174bb22ffe9e1c4', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, index.h("co-icon", { key: '8c6d29e405a12e53bd3ab9f1662c7237bcae0617', name: "x-circle", size: 14 }), index.h("span", { key: 'd7e11cc7753c8dd63ae6a556bf5368c01ea1fc2a' }, this.clearOptionLabel))), this.loading && items.length === 0 && (index.h("div", { key: 'dec374969fe6b401a95d60d101cc625c181f3e72', class: "co-option-list__loading" }, index.h("co-loader", { key: 'c1547fc0f49911f2f8ab8b85063bf15af6500314', size: "sm" }))), !this.loading && items.length === 0 && (index.h("div", { key: '1e0692572f89d4f9507f1e4b8c4ef90f9f8d307c', class: "co-option-list__empty" }, index.h("co-icon", { key: 'ff979119305afdd7b2180336c203ff33adc3c463', name: "magnifying-glass", size: 20 }), index.h("span", { key: '9d460743d6edf7734012d75cabb0f488b67d20cf' }, this.emptyMessage))), items.length > 0 && this.virtual
+        return (index.h("div", { key: '8e4a0e5e6b0831d1413fccc5d58f5548e756ca90', class: "co-option-list", onKeyDown: this.onRootKeyDown }, this.searchable && (index.h("div", { key: '91658cdefff07570ae339a7e4c785493c200b690', class: "co-option-list__search", part: "search" }, index.h("co-icon", { key: '28900e1543e8cd50d7e789de2f6d8815eafd1fb7', name: "magnifying-glass", size: 16 }), index.h("input", { key: '3455b4f3d4e54b81291b997bceb64d95ef1be105', class: "co-option-list__search-input", type: "text", placeholder: this.searchPlaceholder, value: this.term, onInput: this.onSearchInput, ref: (el) => (this.searchInputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list" }))), index.h("div", { key: '32f315ed929802532c1a050d6e42aaa4150a2d11', class: "co-option-list__options", part: "options", role: "listbox", "aria-multiselectable": this.multiple ? 'true' : 'false', ref: (el) => (this.optionsEl = el), onScroll: this.onNativeScroll }, index.h("div", { key: '374a2383399a56d90afcb048f5e6343d4f9275d7', class: "co-option-list__inner" }, showClear && (index.h("button", { key: 'be34ee751a34147660e8bc7846b12d8ab1f937d4', class: "co-option-list__clear-row", type: "button", onClick: () => this.coClearSelection.emit() }, index.h("co-icon", { key: 'c3c70f93b6d4ce7c0774b4c5ff1ebd7f2549dd93', name: "x-circle", size: 14 }), index.h("span", { key: 'a9970acd4f67dc84afd4d7f10317d4e35f0feebf' }, this.clearOptionLabel))), this.loading && items.length === 0 && (index.h("div", { key: '6b1bb04068d2832bd71f0d9b9b9205662a3184f2', class: "co-option-list__loading" }, index.h("co-loader", { key: '1de716e5fac313dbc10a9aeed2dd8f61e491f020', size: "sm" }))), !this.loading && items.length === 0 && (index.h("div", { key: '29f51655d034fcd1b5aac08df9537fb176090ce7', class: "co-option-list__empty" }, index.h("co-icon", { key: 'c7c51260cfe80d82ae75ae0a3510560f5258a3ad', name: "magnifying-glass", size: 20 }), index.h("span", { key: 'af1c571186f203f2a128b4a7f2d26e5171bf7951' }, this.emptyMessage))), items.length > 0 && this.virtual
             ? this.renderVirtual(items, selectedIds)
             : buildRows(items).map((row) => row.kind === 'header'
                 ? index.h("div", { class: "co-option-list__group", role: "presentation" }, row.label)
-                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (index.h("div", { key: 'f9c506fddfba9d360a7dd4b2d4ed4142aaa179c5', class: "co-option-list__loading-more" }, index.h("co-loader", { key: '587d93ebd03eb3764e5637c748975c925d1bd59f', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (index.h("div", { key: 'cef0c72b2aa1f246404001bae6c8ee4ea560ee07', class: "co-option-list__more" }, remaining, " more results")))), index.h("slot", { key: '646b6421fb03008d55e5361e14f12d05db08e299', name: "footer" })));
+                : this.renderRow(row.item, row.index, selectedIds)), this.loading && items.length > 0 && (index.h("div", { key: '0322e0c734d57f0fdc80ace2753276b2bc2a33ad', class: "co-option-list__loading-more" }, index.h("co-loader", { key: 'e305edb2317d433b27e581a97f35e99083306bff', size: "sm" }))), !this.loading && hasMore && remaining > 0 && (index.h("div", { key: '31d25badb8cbefa515eaedd1a849b943274a2f9d', class: "co-option-list__more" }, remaining, " more results")))), index.h("slot", { key: '2df4d5c4c55db9647b378eb9d09c828a76e563f1', name: "footer" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/co-color-picker.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
-var requiredMark = require('./requiredMark-B3pKyqYI.js');
+var index = require('./index-kBiXCEE7.js');
+var requiredMark = require('./requiredMark-DuMIcKtt.js');
 
 /**
  * Default color presets derived from Cobalt design tokens (base.json).
@@ -23,7 +23,7 @@ const DEFAULT_PRESETS = [
     { name: 'Olive', value: '#AAB43C' },
 ];
 
-const coColorPickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-color-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-color-picker--disabled{opacity:0.5;pointer-events:none}.co-color-picker__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);padding:0 var(--co-spacing-xs)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-color-picker co-popover{display:block;width:100%}.co-color-picker__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-color-picker--s .co-color-picker__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-color-picker--sm .co-color-picker__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-color-picker--lg .co-color-picker__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-color-picker--s .co-color-picker__swatch,.co-color-picker--sm .co-color-picker__swatch{width:18px;height:18px}.co-color-picker__trigger:hover{border-color:var(--co-semantic-border-default)}.co-color-picker--open .co-color-picker__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-color-picker--error .co-color-picker__trigger{border-color:var(--co-color-status-error)}.co-color-picker__swatch{width:24px;height:24px;border-radius:var(--co-border-radius-full);border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-color-picker__value{flex:1;font-size:inherit;font-family:inherit;color:var(--co-semantic-text-default);font-weight:500;text-transform:uppercase}.co-color-picker__value--empty{color:var(--co-semantic-text-muted);font-weight:400}.co-color-picker__panel{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-md)}.co-color-picker__grid{display:grid;grid-template-columns:repeat(8, 1fr);gap:var(--co-spacing-sm2)}.co-color-picker__grid-item{width:32px;height:32px;border-radius:var(--co-border-radius-xxs);border:2px solid transparent;cursor:pointer;transition:transform 0.1s ease, border-color 0.1s ease;box-sizing:border-box}.co-color-picker__grid-item:hover{transform:scale(1.1)}.co-color-picker__grid-item--selected{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent)}.co-color-picker__hex-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xxs)}.co-color-picker__hex-prefix{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:500}.co-color-picker__hex-value{flex:1;font-size:var(--co-font-size-14);font-family:var(--co-font-family-mono, monospace);color:var(--co-semantic-text-default);text-transform:uppercase;user-select:all}.co-color-picker__copy-btn{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs);transition:color 0.15s ease, background 0.15s ease}.co-color-picker__copy-btn:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-color-picker__copy-btn--copied{color:var(--co-color-status-success)}.co-color-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);padding:0 var(--co-spacing-xs)}.co-color-picker__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-color-picker--error .co-color-picker__helper{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-color-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-color-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-color-picker__label{white-space:normal}:host([layout='horizontal']) .co-color-picker>:not(.co-color-picker__label){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-color-picker__trigger{background:var(--co-semantic-surface-secondary)}}`;
+const coColorPickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-color-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-color-picker--disabled{opacity:0.5;pointer-events:none}.co-color-picker__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);padding:0 var(--co-spacing-xs)}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}.co-color-picker co-popover{display:block;width:100%}.co-color-picker__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-color-picker--s .co-color-picker__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-color-picker--sm .co-color-picker__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-color-picker--lg .co-color-picker__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-color-picker--s .co-color-picker__swatch,.co-color-picker--sm .co-color-picker__swatch{width:18px;height:18px}.co-color-picker__trigger:hover{border-color:var(--co-semantic-border-default)}.co-color-picker--open .co-color-picker__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 15%, transparent)}.co-color-picker--error .co-color-picker__trigger{border-color:var(--co-color-status-error)}.co-color-picker__swatch{width:22px;height:22px;box-sizing:border-box;border-radius:var(--co-border-radius-full);border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-color-picker__value{flex:1;font-size:inherit;font-family:inherit;color:var(--co-semantic-text-default);font-weight:500;text-transform:uppercase}.co-color-picker__value--empty{color:var(--co-semantic-text-muted);font-weight:400}.co-color-picker__panel{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-md)}.co-color-picker__grid{display:grid;grid-template-columns:repeat(8, 1fr);gap:var(--co-spacing-sm2)}.co-color-picker__grid-item{width:32px;height:32px;border-radius:var(--co-border-radius-xxs);border:2px solid transparent;cursor:pointer;transition:transform 0.1s ease, border-color 0.1s ease;box-sizing:border-box}.co-color-picker__grid-item:hover{transform:scale(1.1)}.co-color-picker__grid-item--selected{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px color-mix(in srgb, var(--co-semantic-border-focus) 25%, transparent)}.co-color-picker__hex-row{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xxs)}.co-color-picker__hex-prefix{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:500}.co-color-picker__hex-value{flex:1;font-size:var(--co-font-size-14);font-family:var(--co-font-family-mono, monospace);color:var(--co-semantic-text-default);text-transform:uppercase;user-select:all}.co-color-picker__copy-btn{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs);transition:color 0.15s ease, background 0.15s ease}.co-color-picker__copy-btn:hover{color:var(--co-semantic-text-default);background:var(--co-semantic-surface-hover)}.co-color-picker__copy-btn--copied{color:var(--co-color-status-success)}.co-color-picker__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);padding:0 var(--co-spacing-xs)}.co-color-picker__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-color-picker--error .co-color-picker__helper{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-color-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-color-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-color-picker__label{white-space:normal}:host([layout='horizontal']) .co-color-picker>:not(.co-color-picker__label){grid-column:2;min-width:0}`;
 
 const CoColorPicker = class {
     constructor(hostRef) {
@@ -99,10 +99,10 @@ const CoColorPicker = class {
         const presets = this.parsedPresets;
         const hasValue = !!this.value;
         const statusClass = this.status !== 'default' ? `co-color-picker--${this.status}` : '';
-        return (index.h("div", { key: 'cf82d2fe5d1ca59a0be4edbd98f2f127cbb0666c', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (index.h("label", { key: 'ad0e372b32b0e7d5294609b7a952e8d4fb633447', class: "co-color-picker__label" }, this.label, index.h(requiredMark.RequiredMark, { key: '9976b6350be9c69a5db48079cdcc32b597b99e4f', required: this.required }))), index.h("co-popover", { key: 'e50a584f035be8e4cb7d18968c16e6dfe5b8fad2', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '79bfb8856c30be5bbedf2471651eafabf4c2faa5', slot: "trigger", class: "co-color-picker__trigger" }, index.h("span", { key: '468b9f7f6a63297086f48938155bea1a5a82ec04', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), index.h("span", { key: '727966662cfa0c6647d66f0268eca9f77452c46d', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (index.h("div", { key: '25df03b58bf3a690e524f53d53a16fe299f019ed', class: "co-color-picker__panel" }, index.h("div", { key: 'd102f3c6b266046dc2b8d6d7536d25aa2dffb79c', class: "co-color-picker__grid" }, presets.map((preset) => {
+        return (index.h("div", { key: 'bf1e124470ecaf6d214835e8bc01d481496c1c20', class: `co-color-picker co-color-picker--${this.size} ${statusClass} ${this.isOpen ? 'co-color-picker--open' : ''} ${this.disabled ? 'co-color-picker--disabled' : ''}` }, this.label && (index.h("label", { key: 'af52a09e440de00f4f1951715043dfcc24291653', class: "co-color-picker__label" }, this.label, index.h(requiredMark.RequiredMark, { key: 'f6a5f5c10920f7289993d9d965e3b2eeff1e9a08', required: this.required }))), index.h("co-popover", { key: '865fe6f411d3f2312b1b1d0a089aae7ae19b4e6f', open: this.isOpen, placement: "bottom-start", matchWidth: true, offset: 4, onCoOpen: this.handlePopoverOpen, onCoClose: this.handlePopoverClose }, index.h("div", { key: '29feea25617531aec3072b6002a2cd3c13eb25e2', slot: "trigger", class: "co-color-picker__trigger" }, index.h("span", { key: '60ccd85b737ba09947ef2b5a9e64a0647bebfa6c', class: "co-color-picker__swatch", style: { background: hasValue ? this.value : 'transparent' } }), index.h("span", { key: '1fae7ddf9b14ed14a9603cf9d9ed45b358d735b1', class: `co-color-picker__value ${!hasValue ? 'co-color-picker__value--empty' : ''}` }, hasValue ? this.value : this.placeholder)), this.isOpen && (index.h("div", { key: '6cea80c1c13136d9526ab93d667c209bd1871f02', class: "co-color-picker__panel" }, index.h("div", { key: '637520727a4452a3de87a0a11715804a8a2cfe2f', class: "co-color-picker__grid" }, presets.map((preset) => {
             var _a;
             return (index.h("button", { type: "button", key: preset.value, class: `co-color-picker__grid-item ${preset.value.toUpperCase() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toUpperCase()) ? 'co-color-picker__grid-item--selected' : ''}`, style: { background: preset.value }, title: preset.name, onClick: () => this.handleSwatchClick(preset.value) }));
-        })), hasValue && (index.h("div", { key: '4897fc8e3c3d371b23b7ae6c9e5c04c92dfe27df', class: "co-color-picker__hex-row" }, index.h("span", { key: '625828e841d8f8b545ee6119d74e839eca80841e', class: "co-color-picker__hex-prefix" }, "#"), index.h("span", { key: '00f73948a453f2db74103ab1d49013e999d13b1f', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), index.h("button", { key: 'c87e69f32065bf05dcad1eaa73cf21d028abf93c', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, index.h("co-icon", { key: 'bf8e7abbb52e543bb4335acc577b268cce40c2be', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (index.h("div", { key: '368cf0c7f3877c1a6fd35c992b6543862b1cebc8', class: "co-color-picker__helper" }, this.statusIcon && (index.h("co-icon", { key: '5b9f3568320860fde1d701ef6e5d9b3475903d8c', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), index.h("span", { key: '5a480e0edaf010df948e8f73e9befa70f88b0865', class: "co-color-picker__helper-text" }, this.helperText)))));
+        })), hasValue && (index.h("div", { key: '21c2ea411903edcd18b40e91afdec27344e55185', class: "co-color-picker__hex-row" }, index.h("span", { key: 'ab7ec79d4edaf97e957735a64bb2cd806acdb8a2', class: "co-color-picker__hex-prefix" }, "#"), index.h("span", { key: '2526d185d375c0ac45c0ac088c3820e28bd94853', class: "co-color-picker__hex-value" }, this.value.replace(/^#/, '')), index.h("button", { key: 'b2a5e1905f629bce7e910261eaa9731bef53110b', type: "button", class: `co-color-picker__copy-btn ${this.copied ? 'co-color-picker__copy-btn--copied' : ''}`, title: "Copy", onClick: () => this.handleCopy() }, index.h("co-icon", { key: 'c642e0f8093ae192cd23439e8cd80694f90d2ecf', name: this.copied ? 'check' : 'copy', size: 16 }))))))), this.helperText && (index.h("div", { key: 'f66cf310df66ac16283afa1d47974a71af66816b', class: "co-color-picker__helper" }, this.statusIcon && (index.h("co-icon", { key: 'c9578df8cc86de8ab277f44a72fae56f5f586004', name: this.statusIcon, size: 14, weight: "fill", class: "co-color-picker__helper-icon" })), index.h("span", { key: 'c9b47133735bba79269e62d80b402766c4a8b019', class: "co-color-picker__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/co-column-picker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DxEFsH_t.js');
+var index = require('./index-kBiXCEE7.js');
 var normalizeText = require('./normalizeText-B-v-XPKf.js');
 
 /**
@@ -423,13 +423,13 @@ const CoColumnPicker = class {
         return (index.h("div", { class: "co-column-picker__empty" }, index.h("co-icon", { name: "magnifying-glass", size: 40, class: "co-column-picker__empty-icon" }), index.h("span", null, this.emptyText)));
     }
     render() {
-        return (index.h("div", { key: '2666e34dab21c03638a74bb5aa49ab0e886a0693', class: {
+        return (index.h("div", { key: '6b8c6cfe2e881d0cba238960fae867205aae32c9', class: {
                 'co-column-picker': true,
                 'co-column-picker--open': this.isOpen,
                 'co-column-picker--disabled': this.disabled,
                 'co-column-picker--focused': this.focused,
                 [`co-column-picker--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: '14278387662b21beb294db48c0758fc6ff265676', class: "co-column-picker__labels" }, this.label && index.h("label", { key: '3f96a7fc4f4c41a4dfd96461b68c3f5b58bb681c', class: "co-column-picker__label" }, this.label), this.secondaryLabel && index.h("span", { key: '96c8aee4265a6a1714d17ab91035bb635df4a925', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (index.h("div", { key: '71ec0116e86706c139eba9a2368c238e527c2251', class: "co-column-picker__dropdown" }, this.showSearch && (index.h("div", { key: 'b17441aa3d0d73dab3b16ae7d9f2d0796968c9da', class: "co-column-picker__search" }, index.h("co-icon", { key: '007c2975b633af4bfde6248372b24cf0a2f9b862', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), index.h("input", { key: 'd6bbaf600cc3f2ed2e490d095045a744b46bed8d', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (index.h("button", { key: 'ba292c3f2ee4fcfb73d1360d681c5ed2ccdd0f41', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, index.h("co-icon", { key: '1ec246b29fb288351153e896b2014b8f4fdec62c', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (index.h("div", { key: '007a4067b4c369f076eef0e5068419ad1ad7717b', class: "co-column-picker__toolbar" }, index.h("button", { key: 'd4ad1c99e81cba77cce7d7f8a121b16398b4b462', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), index.h("button", { key: '2ac4546a1375c337363c905a1262082f4ec4ac25', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), index.h("span", { key: '053b07244ea82a1d83eadc0f3e0d7f3c79df3f1c', class: "co-column-picker__toolbar-sep" }), index.h("button", { key: '0568ea5680716dc2560ca93e89dbb0649145f552', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), index.h("button", { key: '6538744f86c59489871040bed656a85220fbdb1c', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), index.h("span", { key: 'd0c4294e408378f9613655f9f1a8665fff4bc866', style: { flex: '1' } }), this.selectedValues.length > 0 && index.h("span", { key: '5dc6510896ca75e4d1d62608ca9fd0c46daa2158', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), index.h("div", { key: 'bb7a021742ab70da4d1c8b29b58944a826d50399', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (index.h("div", { key: '8135e8db252ad8de777683d308e7440f7902d281', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: 'cd2416dde35f709547185a893cd61c981be0de3f', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), index.h("span", { key: 'eb8b1353ec98c16360ad13484944879046235339', class: "co-column-picker__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel) && (index.h("div", { key: 'b390d0401f69250a1a926f933d181be9a57e4f09', class: "co-column-picker__labels" }, this.label && index.h("label", { key: '6a073085876d0a24fc0e6083645de267c63ae16a', class: "co-column-picker__label" }, this.label), this.secondaryLabel && index.h("span", { key: 'cd41ce02c3bee55bb80fc05cfbc69c662e747c5d', class: "co-column-picker__secondary-label" }, this.secondaryLabel))), this.renderField(), this.isOpen && (index.h("div", { key: 'e508300691a608eba74f0eed4564d3eb00d473ce', class: "co-column-picker__dropdown" }, this.showSearch && (index.h("div", { key: '849fa75718686b0616ba36af36eacf2445e68e95', class: "co-column-picker__search" }, index.h("co-icon", { key: '5a5ff7c464cc5966164621e7c60e58e87cd42c6d', name: "magnifying-glass", size: 14, class: "co-column-picker__search-icon" }), index.h("input", { key: '2e4c97aa689ffbec464e63b27ff502cfdea1da20', ref: el => (this.searchInputEl = el), class: "co-column-picker__search-input", type: "text", value: this.query, placeholder: this.placeholder, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.query && (index.h("button", { key: '2ee4f153a3c3ac3788338c94a7864602630f59fb', class: "co-column-picker__search-clear", type: "button", onClick: this.handleSearchClear }, index.h("co-icon", { key: '281833ffc8f4a0bbe0287c55733fc0fdcd5cd1b6', name: "x", size: 14 }))))), this.showToolbar && this.multiple && (index.h("div", { key: 'cd4c8b1f1bfd728f118668aec42e486a4a9cbaae', class: "co-column-picker__toolbar" }, index.h("button", { key: 'c903f236b2c08a8d879c2b04eaaa54dc719ce7e2', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleSelectAll }, this.selectAllText), index.h("button", { key: '42846fde5f9f53eb7bfe40b61781fd9ce7fbdb51', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleDeselectAll }, this.clearText), index.h("span", { key: 'fda2bf84b90e2523cd27d35eca52c99b9b036101', class: "co-column-picker__toolbar-sep" }), index.h("button", { key: '2e084ef4652b9286a917849b790f053b65a33096', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleExpandAll }, this.expandText), index.h("button", { key: 'e853c6a5177863da0ed836b46cf4d446801b2c33', class: "co-column-picker__toolbar-btn", type: "button", onClick: this.handleCollapseAll }, this.collapseText), index.h("span", { key: 'e68c03ccbdd3ae1f1402caacd08454574614ec9f', style: { flex: '1' } }), this.selectedValues.length > 0 && index.h("span", { key: 'e132ebee1af4b1b73d7587589c9f6de5d6c663b0', class: "co-column-picker__toolbar-counter" }, this.selectedValues.length, " ", this.selectedText))), index.h("div", { key: 'ee5c9f8d58f0a36073bd2dc206b5113002464f6d', class: "co-column-picker__scroll", style: { maxHeight: `${this.maxHeight}px` } }, this.renderTree()))), this.helperText && (index.h("div", { key: '15e9d64ea94e93119198cf33a375927f37d4f795', class: `co-column-picker__helper co-column-picker__helper--${this.status}` }, this.statusIcon && index.h("co-icon", { key: '75539629763f3efc4a8c354954a3c0d166e108df', name: this.statusIcon, size: 14, weight: "fill", class: "co-column-picker__helper-icon" }), index.h("span", { key: 'b84d6dee0cc0fc6cbe91aa67599e26a71e1a3a3c', class: "co-column-picker__helper-text" }, this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {