@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -0,0 +1,325 @@
+'use strict';
+
+var index = require('./index-BumlM92r.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) {
+        index.registerInstance(this, hostRef);
+        this.coClose = index.createEvent(this, "coClose", 3);
+        this.coOpen = index.createEvent(this, "coOpen", 3);
+        this.coAfterOpen = index.createEvent(this, "coAfterOpen", 3);
+        this.coAfterClose = index.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 (index.h("div", { key: '5a012ab0bd3939ed3266ba823d3d88949f6dbedc', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, index.h("div", { key: '4ce730ddf26b6d594b61d53553a3ebca14ed4c5e', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), index.h("section", { key: '75adb4689ffab355a074661adee3dfebfda4d9b5', 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) }, index.h("div", { key: 'a654a44b53c0f9647324c2c587e1e47277a1cd3d', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (index.h("div", { key: '71918dcc9b8ca914fa020cf2428671a2e747103d', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), index.h("header", { key: '57040104cd32072ef0b81dbdb22e3475b94cf64d', class: {
+                'co-bottom-sheet__header': true,
+                'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
+            }, part: "header" }, index.h("slot", { key: '1ebe3576caee4e503930b8f042ae4ef57063427c', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (index.h("h2", { key: '7b5a81b9a833d7a0d00a07b8de7830b7e263d688', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), index.h("div", { key: 'a45ff0344563c24517cffed54bb4993bfa2a6f76', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, index.h("slot", { key: 'b616b4a2fb6ea8634c4bb9889f9a3f1133bb863f' })), index.h("footer", { key: 'e4b192198526c78e2cd015bf116159c359a43292', class: {
+                'co-bottom-sheet__footer': true,
+                'co-bottom-sheet__footer--show': this.hasFooter,
+            }, part: "footer" }, index.h("slot", { key: 'f461a3a9b895581d849f490f9769f280eeb2ce2b', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+CoBottomSheet.style = coBottomSheetCss();
+
+exports.co_bottom_sheet = CoBottomSheet;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.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}`;
 
@@ -16,12 +16,12 @@ const CoButtonGroup = class {
         this.disabled = false;
     }
     render() {
-        return (index.h("div", { key: '1cb2ae54992e103811c5e13d3b332fc2eb7d4d3f', class: {
+        return (index.h("div", { key: 'd95d8e7435cdef2385751f66442871f0f3bfea3b', 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" }, index.h("slot", { key: '35b74774de7adec0eafdced70ff56a34575eb037' })));
+            }, role: "group" }, index.h("slot", { key: 'd7e6aab7a87a34c080d922dca30b1e3d00e0a7b2' })));
     }
 };
 CoButtonGroup.style = coButtonGroupCss();

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BEovErzl.js');
+var index = require('./index-BumlM92r.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-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-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-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-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}::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 {
@@ -38,17 +38,22 @@ const CoButton = class {
         };
     }
     render() {
-        var _a;
-        const iconSize = (_a = ICON_SIZE[this.size]) !== null && _a !== void 0 ? _a : 18;
-        return (index.h("button", { key: '6e8ec1767dafc2feecf773456ad2a1143bcc0fc0', class: {
+        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 (index.h("button", { key: '05a61f0d95bb3c6e09207bb643545694c40b0976', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
                 [`co-button--${this.size}`]: true,
                 'co-button--disabled': this.disabled,
-            }, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
+            }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? index.h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, index.h("slot", { key: 'f1bb85bd1ad4d934e529b40273c65107e92102aa' }, this.label), this.iconRight
+            : null, index.h("slot", { key: '9ebae938e533d11c31899023bf35c8e071dabc6e' }, this.label), this.iconRight
             ? index.h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }