@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/esm/co-bottom-sheet.entry.js

@@ -0,0 +1,323 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Es9IUmmt.js';
+
+/**
+ * Pure gesture math for co-bottom-sheet (DOM-free, unit-tested).
+ * Velocity in px/ms; positive y/velocity = downward (toward dismissal).
+ */
+const DISMISS_VELOCITY = 0.5; // px/ms downward — fast flick dismisses
+const CANCEL_VELOCITY = -0.15; // px/ms upward at release — always restores
+const DISMISS_RATIO = 0.45; // slow release past this fraction of height dismisses
+const MIN_FLICK_OFFSET = 24; // px — flicks shorter than this never dismiss
+function createVelocityTracker(windowMs = 100, maxSamples = 8) {
+    let samples = [];
+    return {
+        add(t, y) {
+            samples.push({ t, y });
+            if (samples.length > maxSamples)
+                samples.shift();
+            // prune anything older than the window relative to the newest sample
+            samples = samples.filter((s) => t - s.t <= windowMs);
+        },
+        velocity() {
+            if (samples.length < 2)
+                return 0;
+            const first = samples[0];
+            const last = samples[samples.length - 1];
+            const dt = last.t - first.t;
+            if (dt < 8)
+                return 0;
+            return (last.y - first.y) / dt;
+        },
+        reset() {
+            samples = [];
+        },
+    };
+}
+/**
+ * iOS-like drag resistance: monotonic, asymptotically approaches `limit`.
+ * rubberBand(0) = 0; rubberBand(∞) → limit.
+ */
+function rubberBand(overdrag, limit = 48) {
+    if (overdrag <= 0)
+        return 0;
+    return limit * (1 - 1 / (overdrag / limit + 1));
+}
+function decideRelease({ offset, height, velocity, dismissible }) {
+    if (!dismissible)
+        return 'restore';
+    if (velocity >= DISMISS_VELOCITY && offset >= MIN_FLICK_OFFSET)
+        return 'dismiss';
+    if (velocity <= CANCEL_VELOCITY)
+        return 'restore';
+    if (height > 0 && offset >= DISMISS_RATIO * height)
+        return 'dismiss';
+    return 'restore';
+}
+
+const coBottomSheetCss = () => `:host{display:contents}.co-bottom-sheet__backdrop{position:fixed;inset:0;z-index:1000;background:rgba(0, 0, 0, 0.4);-webkit-backdrop-filter:blur(var(--co-overlay-blur, 2px));backdrop-filter:blur(var(--co-overlay-blur, 2px));opacity:0;pointer-events:none;transition:opacity 0.25s ease}.co-bottom-sheet-root--open .co-bottom-sheet__backdrop{opacity:1;pointer-events:auto;transition:opacity 0.12s ease}.co-bottom-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1001;display:flex;flex-direction:column;height:auto;max-height:var(--co-bottom-sheet-max-height, 85dvh);background:var(--co-semantic-surface-page);font-family:var(--co-font-family-primary);border-radius:var(--co-border-radius-xl) var(--co-border-radius-xl) 0 0;box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12);transform:translateY(100%);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);will-change:transform;overflow:hidden;visibility:hidden}.co-bottom-sheet--open{transform:translateY(0);visibility:visible}.co-bottom-sheet:not(.co-bottom-sheet--open){transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.25s}.co-bottom-sheet--dragging,.co-bottom-sheet-root:has(.co-bottom-sheet--dragging) .co-bottom-sheet__backdrop{transition:none !important}.co-bottom-sheet__grip{flex-shrink:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab}.co-bottom-sheet--dragging .co-bottom-sheet__grip{cursor:grabbing}.co-bottom-sheet__handle{width:40px;height:4px;margin:var(--co-spacing-sm) auto var(--co-spacing-xs);border-radius:var(--co-border-radius-full);background:var(--co-semantic-border-default)}.co-bottom-sheet__header{padding:0 var(--co-spacing-xl)}.co-bottom-sheet__header--show{padding-bottom:var(--co-spacing-sm)}.co-bottom-sheet__heading{margin:0;font-size:var(--co-font-size-16);font-weight:700;color:var(--co-semantic-text-default)}.co-bottom-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y}.co-bottom-sheet__footer{flex-shrink:0;display:none}.co-bottom-sheet__footer--show{display:block;border-top:1px solid var(--co-semantic-border-default);padding:var(--co-spacing-md) var(--co-spacing-xl)     calc(var(--co-spacing-lg) + env(safe-area-inset-bottom, 0px));background:var(--co-semantic-surface-page)}@media (prefers-reduced-motion: reduce){.co-bottom-sheet,.co-bottom-sheet:not(.co-bottom-sheet--open),.co-bottom-sheet__backdrop{transition-duration:0.01s !important}}`;
+
+const CoBottomSheet = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coClose = createEvent(this, "coClose", 3);
+        this.coOpen = createEvent(this, "coOpen", 3);
+        this.coAfterOpen = createEvent(this, "coAfterOpen", 3);
+        this.coAfterClose = createEvent(this, "coAfterClose", 3);
+        /** Whether the sheet is visible */
+        this.open = false;
+        /** Sheet title (used when the `header` slot is empty) */
+        this.heading = '';
+        /** Maximum sheet height (any CSS length; content shorter than this hugs) */
+        this.maxHeight = '85dvh';
+        /** Allow closing with the drag gesture. When false, drags rubber-band back. */
+        this.dismissible = true;
+        /** Close when tapping the backdrop */
+        this.closeOnOverlay = true;
+        /** Close when pressing Escape */
+        this.closeOnEscape = true;
+        /** Show the grab handle */
+        this.showHandle = true;
+        /* `:empty` can't see across a <slot>, so slotted presence is tracked in JS */
+        this.hasFooter = false;
+        this.hasHeaderSlot = false;
+        this.tracker = createVelocityTracker();
+        // gesture state
+        this.armed = false;
+        this.engaged = false;
+        this.fromBody = false;
+        this.startY = 0;
+        this.startX = 0;
+        this.startScrollTop = 0;
+        this.sheetHeight = 0;
+        this.dismissPending = false;
+        // after-events fire only for real open/close settles, never restore springs
+        this.pendingAfter = null;
+        this.handleBackdropClick = () => {
+            if (this.closeOnOverlay)
+                this.coClose.emit();
+        };
+        this.handleFooterSlotChange = (e) => {
+            this.hasFooter = this.slotHasContent(e);
+        };
+        this.handleHeaderSlotChange = (e) => {
+            this.hasHeaderSlot = this.slotHasContent(e);
+        };
+        this.handleTransitionEnd = (e) => {
+            if (e.propertyName !== 'transform' || e.target !== this.sheetEl)
+                return;
+            if (this.pendingAfter === 'open' && this.open)
+                this.coAfterOpen.emit();
+            if (this.pendingAfter === 'close' && !this.open)
+                this.coAfterClose.emit();
+            this.pendingAfter = null;
+        };
+        // ─── drag gesture ──────────────────────────────────────────────
+        this.handleGripPointerDown = (e) => {
+            this.arm(e, false);
+        };
+        this.handleBodyPointerDown = (e) => {
+            this.arm(e, true);
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.armed || !e.isPrimary)
+                return;
+            const dy = e.clientY - this.startY;
+            const dx = e.clientX - this.startX;
+            if (!this.engaged) {
+                const slop = this.fromBody ? 8 : 4;
+                if (Math.abs(dy) < slop)
+                    return;
+                if (this.fromBody) {
+                    const scrollable = this.bodyEl
+                        ? this.bodyEl.scrollHeight > this.bodyEl.clientHeight
+                        : false;
+                    // content scroll wins: not at top, mostly-horizontal, or scrolling up
+                    if (this.startScrollTop > 0 ||
+                        Math.abs(dy) <= Math.abs(dx) ||
+                        (dy < 0 && scrollable)) {
+                        this.disarm();
+                        return;
+                    }
+                }
+                // capture on the element that owns these listeners (grip or body) so
+                // retargeted move/up events keep flowing through them
+                this.engage(e, e.currentTarget);
+            }
+            // re-anchor so the sheet doesn't jump by the slop distance
+            const offsetRaw = e.clientY - this.startY;
+            let offset;
+            if (offsetRaw >= 0) {
+                offset = this.dismissible ? offsetRaw : rubberBand(offsetRaw);
+            }
+            else {
+                offset = -rubberBand(-offsetRaw);
+            }
+            if (this.sheetEl) {
+                this.sheetEl.style.transform = `translate3d(0, ${offset}px, 0)`;
+            }
+            if (this.backdropEl && this.sheetHeight > 0) {
+                const progress = Math.min(Math.max(offset / this.sheetHeight, 0), 1);
+                this.backdropEl.style.opacity = String(1 - progress);
+            }
+            this.tracker.add(e.timeStamp, e.clientY);
+        };
+        this.handlePointerUp = (e) => {
+            if (!this.armed)
+                return;
+            const wasEngaged = this.engaged;
+            const offset = wasEngaged ? Math.max(e.clientY - this.startY, 0) : 0;
+            const velocity = this.tracker.velocity();
+            this.disarm();
+            if (!wasEngaged)
+                return;
+            const action = decideRelease({
+                offset,
+                height: this.sheetHeight,
+                velocity,
+                dismissible: this.dismissible,
+            });
+            if (action === 'dismiss') {
+                this.dismissPending = true;
+                if (this.sheetEl) {
+                    this.sheetEl.style.transform = `translate3d(0, ${this.sheetHeight}px, 0)`;
+                }
+                if (this.backdropEl)
+                    this.backdropEl.style.opacity = '0';
+                this.coClose.emit();
+                // host refused to close (open never flipped): spring back to consistency
+                this.dismissFallback = setTimeout(() => {
+                    if (this.open && this.dismissPending) {
+                        this.dismissPending = false;
+                        this.clearInlineStyles();
+                    }
+                }, 500);
+            }
+            else {
+                this.clearInlineStyles();
+            }
+        };
+        this.handlePointerCancel = () => {
+            // native scroll (or the OS) claimed the gesture — always restore
+            if (!this.armed)
+                return;
+            this.disarm();
+            this.clearInlineStyles();
+        };
+        /**
+         * iOS: `touch-action` is frozen at gesture start and preventDefault on
+         * pointermove does not stop native scrolling — only a non-passive touchmove
+         * listener can claim the gesture from a scrollable body.
+         */
+        this.touchBlocker = (e) => {
+            if (this.engaged) {
+                e.preventDefault();
+                return;
+            }
+            if (this.armed && this.startScrollTop <= 0) {
+                const dy = e.touches[0].clientY - this.startY;
+                if (dy > 0)
+                    e.preventDefault();
+            }
+        };
+    }
+    onOpenChange(next, prev) {
+        if (next === prev)
+            return;
+        this.pendingAfter = next ? 'open' : 'close';
+        if (next) {
+            this.coOpen.emit();
+            this.clearInlineStyles();
+        }
+        else {
+            // dismiss gesture pinned the transform at the closed position; the
+            // class-driven closed transform is identical, so clearing on the next
+            // frame produces a single transition (or none if already there)
+            this.dismissPending = false;
+            if (this.dismissFallback)
+                clearTimeout(this.dismissFallback);
+            requestAnimationFrame(() => this.clearInlineStyles());
+        }
+    }
+    handleKey(e) {
+        if (this.open && this.closeOnEscape && e.key === 'Escape') {
+            this.coClose.emit();
+        }
+    }
+    disconnectedCallback() {
+        this.detachTouchBlocker();
+        if (this.dismissFallback)
+            clearTimeout(this.dismissFallback);
+    }
+    clearInlineStyles() {
+        if (this.sheetEl)
+            this.sheetEl.style.transform = '';
+        if (this.backdropEl)
+            this.backdropEl.style.opacity = '';
+    }
+    slotHasContent(e) {
+        return e.target
+            .assignedNodes({ flatten: true })
+            .some((node) => node.nodeType === Node.ELEMENT_NODE ||
+            (node.nodeType === Node.TEXT_NODE && (node.textContent || '').trim() !== ''));
+    }
+    arm(e, fromBody) {
+        if (!this.open || this.dismissPending || !e.isPrimary)
+            return;
+        this.armed = true;
+        this.engaged = false;
+        this.fromBody = fromBody;
+        this.startY = e.clientY;
+        this.startX = e.clientX;
+        this.startScrollTop = fromBody && this.bodyEl ? this.bodyEl.scrollTop : 0;
+        if (fromBody)
+            this.attachTouchBlocker();
+    }
+    engage(e, captureTarget) {
+        var _a, _b;
+        this.engaged = true;
+        this.startY = e.clientY; // re-anchor at the engage point
+        this.sheetHeight = ((_a = this.sheetEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+        (_b = this.sheetEl) === null || _b === void 0 ? void 0 : _b.classList.add('co-bottom-sheet--dragging');
+        try {
+            captureTarget === null || captureTarget === void 0 ? void 0 : captureTarget.setPointerCapture(e.pointerId);
+        }
+        catch (_c) {
+            /* pointer already gone — release will still arrive as pointercancel */
+        }
+        this.tracker.reset();
+        this.tracker.add(e.timeStamp, e.clientY);
+    }
+    disarm() {
+        var _a;
+        this.armed = false;
+        this.engaged = false;
+        (_a = this.sheetEl) === null || _a === void 0 ? void 0 : _a.classList.remove('co-bottom-sheet--dragging');
+        this.detachTouchBlocker();
+    }
+    attachTouchBlocker() {
+        var _a;
+        (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.addEventListener('touchmove', this.touchBlocker, { passive: false });
+    }
+    detachTouchBlocker() {
+        var _a;
+        (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', this.touchBlocker);
+    }
+    render() {
+        return (h("div", { key: 'e97aa389e60d44d412094c26854b788576426be1', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '03f77f9cd1f73a30264b98f42ad14aff228f58e9', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '794c4506fb1cdb0d8229c6ec28171843ab009f22', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'co-bottom-sheet-heading' : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: 'a594d01c6c42a2829d81d8b4953bdb016b342cae', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: 'e7f768591e1a80b483b5312ea322184aacccbabf', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '8bc0a823bef53438baabfa96465c762533d3c865', class: {
+                'co-bottom-sheet__header': true,
+                'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
+            }, part: "header" }, h("slot", { key: 'fff2367303fee3c26d3a73e48ca3b6655ce44414', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '6d3947f80b56a798f2aaf454333c333a0d3b4106', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'c121e082e757c7ede9e79fabc704f7077652fbe2', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '895b3cda6d949853eff766133404c24039b4cb40' })), h("footer", { key: '24f5fa83ddada45deef4f49e55e3f330928b02f1', class: {
+                'co-bottom-sheet__footer': true,
+                'co-bottom-sheet__footer--show': this.hasFooter,
+            }, part: "footer" }, h("slot", { key: 'e4a74380717a71b454af249e9ed732d8bbc8eabb', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+CoBottomSheet.style = coBottomSheetCss();
+
+export { CoBottomSheet as co_bottom_sheet };

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

@@ -0,0 +1,35 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Es9IUmmt.js';
+
+const coBreadcrumbItemCss = () => `:host{display:inline-flex;align-items:center;min-width:0}.co-breadcrumb-item__sep{display:inline-flex;align-items:center;flex-shrink:0;margin-right:var(--co-spacing-xs, 4px);color:var(--co-color-gray-400, #a0a0a0)}:host(:first-child) .co-breadcrumb-item__sep{display:none}.co-breadcrumb-item__content{display:inline-flex;align-items:center;gap:7px;min-width:0;padding:0;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body, -0.03em);color:var(--co-color-gray-500, #888888)}.co-breadcrumb-item__content:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul, #2563eb));outline-offset:2px;border-radius:2px}.co-breadcrumb-item--current .co-breadcrumb-item__content{font-weight:500;color:var(--co-color-base-negro, #1f1c1b)}.co-breadcrumb-item__icon{display:inline-flex;align-items:center;flex-shrink:0;}.co-breadcrumb-item__label{min-width:0;overflow:hidden;text-overflow:ellipsis}`;
+
+const CoBreadcrumbItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coSelect = createEvent(this, "coSelect", 7);
+        /** Marks this crumb as the current (last) page — medium weight + text-default ink. */
+        this.current = false;
+        /** Leading separator icon (size 13, gray-400). Hidden on the first crumb via
+         *  CSS. Set by the parent `co-breadcrumb`; defaults to `caret-right`. */
+        this.separator = 'caret-right';
+        this.emit = () => {
+            this.coSelect.emit(this.value || this.label || '');
+        };
+        this.handleClick = () => this.emit();
+        this.handleKeydown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.emit();
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: 'd788ec16332a691710015ad2be2577388fe2f556', part: "breadcrumb-item", class: {
+                'co-breadcrumb-item': true,
+                'co-breadcrumb-item--current': this.current,
+            } }, h("span", { key: '8ce859164b523684d7480a3defc645a5153a2915', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '5cce7777df74e3e7a8e2f3dc7ac585eef7ffce58', name: this.separator, size: 13 })), h("span", { key: '3d707d53b84100b66eaf31bef278865d9bb36fd5', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: 'd5f033e2036771dd35ce14c2c30533e9ad27111b', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'dce9a4c62fa71a6cb00eb5110c8145ca8d940398', name: this.icon, size: 16 }))), h("span", { key: '1d0d750e03729165dddd5fbbb624e3ccdbf4f446', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '50fdfd367f71edfdcd3e3943e14fb35dbecb170f' })))));
+    }
+    get el() { return getElement(this); }
+};
+CoBreadcrumbItem.style = coBreadcrumbItemCss();
+
+export { CoBreadcrumbItem as co_breadcrumb_item };

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

@@ -0,0 +1,53 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Es9IUmmt.js';
+
+const coBreadcrumbCss = () => `:host{display:flex;align-items:center;gap:var(--co-spacing-xs, 4px);min-width:0}`;
+
+const CoBreadcrumb = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon name (Phosphor) for the separator between crumbs. Propagated to
+         *  slotted `co-breadcrumb-item` children. */
+        this.separator = 'caret-right';
+        this.handleSlotChange = () => this.propagateSeparator();
+    }
+    watchSeparator() {
+        this.propagateSeparator();
+    }
+    componentDidLoad() {
+        this.propagateSeparator();
+    }
+    /** Push the current `separator` onto every slotted (light-DOM) crumb. Items
+     *  auto-rendered from `items` get it directly in render() instead. */
+    propagateSeparator() {
+        const nodes = this.el.querySelectorAll('co-breadcrumb-item');
+        nodes.forEach((n) => {
+            n.separator = this.separator;
+        });
+    }
+    parseItems() {
+        if (!this.items)
+            return null;
+        try {
+            const parsed = JSON.parse(this.items);
+            return Array.isArray(parsed) ? parsed : null;
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    render() {
+        const data = this.parseItems();
+        return (h(Host, { key: '904d5f190213ccaeff86950071a170b52c548ceb', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
+            ? data.map((it, i) => (h("co-breadcrumb-item", { key: i, label: it.label, value: it.value, icon: it.icon, separator: this.separator, current: i === data.length - 1 })))
+            : h("slot", { onSlotchange: this.handleSlotChange })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "separator": [{
+                "watchSeparator": 0
+            }]
+    }; }
+};
+CoBreadcrumb.style = coBreadcrumbCss();
+
+export { CoBreadcrumb as co_breadcrumb };

package/dist/esm/co-button-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, h } from './index-Es9IUmmt.js';
 
 const coButtonGroupCss = () => `:host{display:inline-flex}.co-button-group{display:inline-flex;gap:0}.co-button-group--row{flex-direction:row}.co-button-group--column{flex-direction:column}.co-button-group--row ::slotted(co-button){--co-btn-border-radius:0}.co-button-group--row ::slotted(co-button:first-child){--co-btn-border-radius-left:var(--co-border-radius-xs)}.co-button-group--row ::slotted(co-button:last-child){--co-btn-border-radius-right:var(--co-border-radius-xs)}.co-button-group--column ::slotted(co-button){--co-btn-border-radius:0;width:100%}.co-button-group--column ::slotted(co-button:first-child){--co-btn-border-radius-top:var(--co-border-radius-xs)}.co-button-group--column ::slotted(co-button:last-child){--co-btn-border-radius-bottom:var(--co-border-radius-xs)}.co-button-group--stroke.co-button-group--row ::slotted(co-button:not(:first-child)){margin-left:-1px}.co-button-group--stroke.co-button-group--column ::slotted(co-button:not(:first-child)){margin-top:-1px}.co-button-group--disabled{opacity:0.4;pointer-events:none}`;
 
@@ -14,12 +14,12 @@ const CoButtonGroup = class {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: '1cb2ae54992e103811c5e13d3b332fc2eb7d4d3f', class: {
+        return (h("div", { key: 'aaf009acd7eff27fb1b50ac4356c1686b1fc3a3d', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: '35b74774de7adec0eafdced70ff56a34575eb037' })));
+            }, role: "group" }, h("slot", { key: 'fd7468a9a12794ca8f88a4a9eba2eedb2cee1583' })));
     }
 };
 CoButtonGroup.style = coButtonGroupCss();

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, a as getElement } from './index-BKmfyPZK.js';
+import { r as registerInstance, h, a as getElement } from './index-Es9IUmmt.js';
 
-const coButtonCss = () => `:host{display:inline-flex}.co-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;outline:none;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;-webkit-font-smoothing:antialiased;transition:opacity 0.15s ease, background 0.15s ease;box-sizing:border-box}.co-button--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-button--secondary{background:var(--co-semantic-surface-secondary);color:var(--co-semantic-on-secondary)}.co-button--stroke{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-button--ghost{background:transparent;color:var(--co-semantic-text-default)}.co-button--rounded.co-button--l{padding:var(--co-spacing-xl) var(--co-spacing-2xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--m{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-16);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--s{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-14);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--xs{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-12);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--square.co-button--l{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-border-radius-lg)}.co-button--square.co-button--m{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-16);border-radius:var(--co-border-radius-sm)}.co-button--square.co-button--s{padding:var(--co-spacing-sm2) var(--co-spacing-md);gap:var(--co-spacing-sm);font-size:var(--co-font-size-14);border-radius:var(--co-border-radius-xs)}.co-button--square.co-button--xs{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:var(--co-spacing-xs);font-size:var(--co-font-size-12);border-radius:var(--co-spacing-sm)}.co-button--disabled,.co-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-button--primary:hover:not(:disabled){opacity:0.88}.co-button--secondary:hover:not(:disabled),.co-button--stroke:hover:not(:disabled),.co-button--ghost:hover:not(:disabled){background:var(--co-semantic-surface-hover)}::slotted([slot="icon-left"]),::slotted([slot="icon-right"]){display:inline-flex;flex-shrink:0}`;
+const coButtonCss = () => `:host{display:inline-flex}.co-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;-webkit-font-smoothing:antialiased;transition:opacity 0.15s ease, background 0.15s ease;box-sizing:border-box;-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))}.co-button--primary{background:color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);color:var(--co-semantic-on-primary);border-color:color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent)}.co-button--secondary{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);color:var(--co-semantic-on-secondary);border-color:var(--co-semantic-border-subtle)}.co-button--stroke{background:color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-button--ghost{background:transparent;color:var(--co-semantic-text-default);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.co-button--danger{background:var(--co-semantic-status-error);color:var(--co-color-base-blanco);border-color:transparent}.co-button--success{background:var(--co-semantic-status-success);color:var(--co-color-base-blanco);border-color:transparent}.co-button--rounded.co-button--l{padding:var(--co-spacing-xl) var(--co-spacing-2xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--m{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-16);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--s{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-14);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--xs{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-12);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--square.co-button--l{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-border-radius-lg)}.co-button--square.co-button--m{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-16);border-radius:var(--co-border-radius-sm)}.co-button--square.co-button--s{padding:var(--co-spacing-sm2) var(--co-spacing-md);gap:var(--co-spacing-sm);font-size:var(--co-font-size-14);border-radius:var(--co-border-radius-xs)}.co-button--square.co-button--xs{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:var(--co-spacing-xs);font-size:var(--co-font-size-12);border-radius:var(--co-spacing-sm)}.co-button--disabled,.co-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-button--primary:hover:not(:disabled){opacity:0.88}.co-button--secondary:hover:not(:disabled),.co-button--stroke:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-button--ghost:hover:not(:disabled){background:color-mix(in srgb, var(--co-semantic-surface-hover) 60%, 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))}.co-button--danger:hover:not(:disabled),.co-button--success:hover:not(:disabled){opacity:0.88}.co-button--secondary.co-button--elevated{box-shadow:var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),     inset 0 0 0 1px var(--co-color-opacity-negro-8)}.co-button--ghost.co-button--surface-dark,.co-button--stroke.co-button--surface-dark{color:var(--co-color-base-blanco, #fff)}.co-button--ghost.co-button--surface-dark:hover:not(:disabled),.co-button--stroke.co-button--surface-dark:hover:not(:disabled){background:var(--co-color-opacity-blanco-16);-webkit-backdrop-filter:none;backdrop-filter:none}::slotted([slot="icon-left"]),::slotted([slot="icon-right"]){display:inline-flex;flex-shrink:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-button--primary{background:var(--co-semantic-surface-primary)}.co-button--secondary{background:var(--co-semantic-surface-secondary)}.co-button--stroke{background:transparent}}`;
 
 const ICON_SIZE = { l: 20, m: 18, s: 16, xs: 14 };
 const CoButton = class {
@@ -12,6 +12,10 @@ const CoButton = class {
         this.shape = 'rounded';
         /** Size */
         this.size = 'm';
+        /** Raised elevation — with variant="secondary" renders a white raised button (shadow-sm + inset hairline). */
+        this.elevated = false;
+        /** Surface the button sits on. On "dark", ghost/stroke variants switch to white ink + blanco-16 hover. */
+        this.surface = 'light';
         /** Disabled state */
         this.disabled = false;
         /** Icon weight applied to both iconLeft and iconRight */
@@ -36,22 +40,24 @@ const CoButton = class {
         };
     }
     render() {
-        var _a;
-        const iconSize = (_a = ICON_SIZE[this.size]) !== null && _a !== void 0 ? _a : 18;
+        var _a, _b;
+        const iconSize = (_b = (_a = this.iconSize) !== null && _a !== void 0 ? _a : ICON_SIZE[this.size]) !== null && _b !== void 0 ? _b : 18;
         const customStyle = {};
         if (this.color)
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: 'e4851bcf865f7588c2732939375d66764fcf43fe', class: {
+        return (h("button", { key: '4a821dbbf2e1bc8e56343c64d8c4a4b46831c691', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
                 [`co-button--${this.size}`]: true,
+                [`co-button--surface-${this.surface}`]: true,
+                'co-button--elevated': this.elevated,
                 'co-button--disabled': this.disabled,
             }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: '83c41e8362c71147f909e1e82fd199233dcf8892' }, this.label), this.iconRight
+            : null, h("slot", { key: '386309fa7ba9624ac2fbeed888ca84db0a74f57a' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }