@prolibu-suite/cobalt-core 0.1.1 → 0.2.0

package/dist/esm/co-date-range.entry.js

@@ -1,285 +1,39 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
 
-const coDateRangeCss = () => `:host{display:inline-block;position:relative;font-family:var(--co-font-family-primary)}.co-date-range{position:relative;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-date-range__label{font-size:var(--co-font-size-12);font-weight:500;color:var(--co-semantic-text-default);text-transform:uppercase;letter-spacing:0.04em}.co-date-range__trigger{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-md);height:40px;min-width:240px;background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);cursor:pointer;font-size:var(--co-font-size-14);color:var(--co-semantic-text-default);transition:border-color 0.15s ease, box-shadow 0.15s ease;user-select:none}.co-date-range__trigger:hover:not(.co-date-range__trigger--disabled){border-color:var(--co-semantic-text-default)}.co-date-range__trigger--open{border-color:var(--co-color-primary-azul);box-shadow:0 0 0 3px rgba(37, 99, 235, 0.12)}.co-date-range__trigger--disabled{opacity:0.5;cursor:not-allowed}.co-date-range__trigger--error{border-color:var(--co-color-status-error)}.co-date-range__trigger--success{border-color:var(--co-color-status-success)}.co-date-range__icon{color:var(--co-semantic-text-muted);flex-shrink:0}.co-date-range__caret{color:var(--co-semantic-text-muted);flex-shrink:0}.co-date-range__trigger-text{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-date-range__trigger-text--placeholder{color:var(--co-semantic-text-muted)}.co-date-range__clear{background:none;border:0;padding:0;cursor:pointer;color:var(--co-semantic-text-muted);display:inline-flex;align-items:center;flex-shrink:0}.co-date-range__clear:hover{color:var(--co-semantic-text-default)}.co-date-range__helper{font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted)}.co-date-range__helper--error{color:var(--co-color-status-error)}.co-date-range__helper--success{color:var(--co-color-status-success)}.co-date-range__popover{position:absolute;top:calc(100% + 4px);left:0;background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);z-index:1000;display:flex;flex-direction:column;width:320px}.co-date-range__popover-body{display:flex;flex-direction:column;gap:var(--co-spacing-md);padding:var(--co-spacing-md)}.co-date-range__presets{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs)}.co-date-range__preset{background:var(--co-semantic-surface-hover);border:0;padding:4px var(--co-spacing-sm);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-family:inherit;color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.15s ease}.co-date-range__preset:hover{background:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08))}.co-date-range__calendar{display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-date-range__cal-header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-date-range__month-label{font-size:var(--co-font-size-14);font-weight:500;text-transform:capitalize}.co-date-range__nav{background:none;border:0;cursor:pointer;padding:4px;border-radius:var(--co-border-radius-xxs);display:inline-flex;color:var(--co-semantic-text-default)}.co-date-range__nav:hover{background:var(--co-semantic-surface-hover)}.co-date-range__dow{display:grid;grid-template-columns:repeat(7, 1fr);gap:2px;text-align:center;font-size:10px;font-weight:600;color:var(--co-semantic-text-muted);text-transform:uppercase;letter-spacing:0.04em}.co-date-range__days{display:grid;grid-template-columns:repeat(7, 1fr);gap:2px}.co-date-range__day{background:none;border:0;padding:0;height:32px;border-radius:var(--co-border-radius-xxs);font-size:var(--co-font-size-12);font-family:inherit;cursor:pointer;color:var(--co-semantic-text-default);transition:background 0.1s ease, color 0.1s ease}.co-date-range__day--empty{background:transparent;cursor:default;pointer-events:none}.co-date-range__day:not(.co-date-range__day--empty):hover{background:var(--co-semantic-surface-hover)}.co-date-range__day--in-range{background:rgba(37, 99, 235, 0.12);border-radius:0;color:var(--co-color-primary-azul)}.co-date-range__day--start,.co-date-range__day--end{background:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-date-range__day--start{border-top-right-radius:0;border-bottom-right-radius:0}.co-date-range__day--end{border-top-left-radius:0;border-bottom-left-radius:0}.co-date-range__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-md);border-top:1px solid var(--co-semantic-border-default)}.co-date-range__btn{padding:6px var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-size:var(--co-font-size-12);font-family:inherit;font-weight:500;cursor:pointer;border:0}.co-date-range__btn--ghost{background:transparent;color:var(--co-semantic-text-default)}.co-date-range__btn--ghost:hover{background:var(--co-semantic-surface-hover)}.co-date-range__btn--primary{background:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff)}.co-date-range__btn--primary:disabled{opacity:0.5;cursor:not-allowed}`;
+const coDateRangeCss = () => `:host{display:block}`;
 
 const CoDateRange = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coChange = createEvent(this, "coChange", 7);
         this.coClear = createEvent(this, "coClear", 7);
-        /** JSON `{from, to}` or empty string. */
+        /** JSON `{from,to}` or empty string. */
         this.value = '';
         this.label = '';
         this.placeholder = 'Select range';
         this.disabled = false;
         this.clearable = true;
         this.presets = true;
-        this.status = 'default';
         this.helperText = '';
-        /** BCP-47 locale tag used by Intl.DateTimeFormat. */
+        /** BCP-47 locale. */
         this.locale = 'es';
-        // i18n-ready labels (host wires from $t())
-        this.presetTodayLabel = 'Today';
-        this.presetThisWeekLabel = 'This week';
-        this.presetThisMonthLabel = 'This month';
-        this.presetLast30DaysLabel = 'Last 30 days';
-        this.presetLast90DaysLabel = 'Last 90 days';
-        this.presetThisYearLabel = 'This year';
-        this.applyLabel = 'Apply';
-        this.clearLabel = 'Clear';
-        this.isOpen = false;
-        this.draftFrom = null;
-        this.draftTo = null;
-        this.hoverDay = null;
-        this.viewMonth = new Date().getMonth();
-        this.viewYear = new Date().getFullYear();
-        this.handleTriggerClick = () => {
-            if (this.disabled)
-                return;
-            this.isOpen = !this.isOpen;
+        this.warned = false;
+        this.handleApply = (e) => {
+            this.value = JSON.stringify(e.detail);
+            this.coChange.emit(e.detail);
         };
-        this.handleDocumentClick = (e) => {
-            if (!this.isOpen)
-                return;
-            const path = e.composedPath();
-            if (!path.includes(this.el)) {
-                e.stopPropagation();
-                this.handleCancel();
-            }
-        };
-        this.handleCancel = () => {
-            this.isOpen = false;
-            const parsed = this.parseValue();
-            this.draftFrom = parsed.from;
-            this.draftTo = parsed.to;
-        };
-        this.handleDayClick = (day) => {
-            if (!this.draftFrom || (this.draftFrom && this.draftTo)) {
-                this.draftFrom = day;
-                this.draftTo = null;
-                return;
-            }
-            if (this.draftFrom && !this.draftTo) {
-                if (day < this.draftFrom) {
-                    this.draftTo = this.draftFrom;
-                    this.draftFrom = day;
-                }
-                else {
-                    this.draftTo = day;
-                }
-            }
-        };
-        this.handleDayHover = (day) => {
-            this.hoverDay = day;
-        };
-        this.handlePresetClick = (preset) => {
-            const today = new Date();
-            today.setHours(0, 0, 0, 0);
-            let from = null;
-            let to = null;
-            if (preset === 'today') {
-                from = today;
-                to = today;
-            }
-            else if (preset === 'thisWeek') {
-                const dow = today.getDay() === 0 ? 7 : today.getDay();
-                from = new Date(today);
-                from.setDate(today.getDate() - (dow - 1));
-                to = new Date(from);
-                to.setDate(from.getDate() + 6);
-            }
-            else if (preset === 'thisMonth') {
-                from = new Date(today.getFullYear(), today.getMonth(), 1);
-                to = new Date(today.getFullYear(), today.getMonth() + 1, 0);
-            }
-            else if (preset === 'last30Days') {
-                to = today;
-                from = new Date(today);
-                from.setDate(today.getDate() - 29);
-            }
-            else if (preset === 'last90Days') {
-                to = today;
-                from = new Date(today);
-                from.setDate(today.getDate() - 89);
-            }
-            else if (preset === 'thisYear') {
-                from = new Date(today.getFullYear(), 0, 1);
-                to = new Date(today.getFullYear(), 11, 31);
-            }
-            if (!from || !to)
-                return;
-            this.draftFrom = this.formatISO(from);
-            this.draftTo = this.formatISO(to);
-            this.viewYear = from.getFullYear();
-            this.viewMonth = from.getMonth();
-        };
-        this.handleApply = () => {
-            this.value = JSON.stringify({ from: this.draftFrom, to: this.draftTo });
-            this.coChange.emit({ from: this.draftFrom, to: this.draftTo });
-            this.isOpen = false;
-        };
-        this.handleClear = () => {
-            this.draftFrom = null;
-            this.draftTo = null;
-            this.value = '';
-            this.coClear.emit();
-            this.coChange.emit({ from: null, to: null });
-            this.isOpen = false;
-        };
-        this.prevMonth = () => {
-            if (this.viewMonth === 0) {
-                this.viewMonth = 11;
-                this.viewYear--;
-            }
-            else {
-                this.viewMonth--;
-            }
-        };
-        this.nextMonth = () => {
-            if (this.viewMonth === 11) {
-                this.viewMonth = 0;
-                this.viewYear++;
-            }
-            else {
-                this.viewMonth++;
-            }
-        };
-    }
-    onValueChange() {
-        const parsed = this.parseValue();
-        this.draftFrom = parsed.from;
-        this.draftTo = parsed.to;
-    }
-    componentWillLoad() {
-        const parsed = this.parseValue();
-        this.draftFrom = parsed.from;
-        this.draftTo = parsed.to;
-        if (parsed.from) {
-            const d = new Date(parsed.from);
-            this.viewMonth = d.getMonth();
-            this.viewYear = d.getFullYear();
-        }
     }
     connectedCallback() {
-        document.addEventListener('click', this.handleDocumentClick, true);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleDocumentClick, true);
-    }
-    parseValue() {
-        if (!this.value)
-            return { from: null, to: null };
-        try {
-            const v = JSON.parse(this.value);
-            return { from: v.from || null, to: v.to || null };
-        }
-        catch (_a) {
-            return { from: null, to: null };
-        }
-    }
-    formatISO(d) {
-        const y = d.getFullYear();
-        const m = String(d.getMonth() + 1).padStart(2, '0');
-        const day = String(d.getDate()).padStart(2, '0');
-        return `${y}-${m}-${day}`;
-    }
-    renderTriggerLabel() {
-        if (!this.draftFrom && !this.draftTo)
-            return this.placeholder;
-        if (this.draftFrom && this.draftTo)
-            return `${this.draftFrom} → ${this.draftTo}`;
-        if (this.draftFrom)
-            return `${this.draftFrom} → …`;
-        return this.placeholder;
-    }
-    inRange(day) {
-        if (!day || !this.draftFrom)
-            return false;
-        if (this.draftFrom && this.draftTo) {
-            return day >= this.draftFrom && day <= this.draftTo;
-        }
-        if (this.draftFrom && this.hoverDay) {
-            const start = this.draftFrom < this.hoverDay ? this.draftFrom : this.hoverDay;
-            const end = this.draftFrom < this.hoverDay ? this.hoverDay : this.draftFrom;
-            return day >= start && day <= end;
-        }
-        return false;
-    }
-    renderCalendar() {
-        const monthName = new Intl.DateTimeFormat(this.locale, { month: 'long', year: 'numeric' })
-            .format(new Date(this.viewYear, this.viewMonth, 1));
-        const firstDay = new Date(this.viewYear, this.viewMonth, 1);
-        // Monday-first grid
-        const startDow = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1;
-        const lastDay = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
-        // Day-of-week labels (Mon..Sun in the active locale).
-        const monStart = new Date(this.viewYear, this.viewMonth, 1);
-        while (monStart.getDay() !== 1)
-            monStart.setDate(monStart.getDate() - 1);
-        const dowLabels = [];
-        for (let i = 0; i < 7; i++) {
-            const d = new Date(monStart);
-            d.setDate(monStart.getDate() + i);
-            const lbl = new Intl.DateTimeFormat(this.locale, { weekday: 'short' }).format(d);
-            dowLabels.push(lbl.charAt(0).toUpperCase() + lbl.slice(1, 2));
-        }
-        // Day cells (with leading blanks for alignment)
-        const cells = [];
-        for (let i = 0; i < startDow; i++)
-            cells.push(null);
-        for (let d = 1; d <= lastDay; d++) {
-            cells.push(this.formatISO(new Date(this.viewYear, this.viewMonth, d)));
+        if (!this.warned) {
+            this.warned = true;
+            // eslint-disable-next-line no-console
+            console.warn('[cobalt] <co-date-range> is deprecated — use <co-date-range-picker>.');
         }
-        while (cells.length % 7 !== 0)
-            cells.push(null);
-        return (h("div", { class: "co-date-range__calendar" }, h("div", { class: "co-date-range__cal-header" }, h("button", { class: "co-date-range__nav", type: "button", onClick: this.prevMonth, "aria-label": "Previous month" }, h("co-icon", { name: "caret-left", size: 16 })), h("span", { class: "co-date-range__month-label" }, monthName), h("button", { class: "co-date-range__nav", type: "button", onClick: this.nextMonth, "aria-label": "Next month" }, h("co-icon", { name: "caret-right", size: 16 }))), h("div", { class: "co-date-range__dow" }, dowLabels.map((l, i) => h("span", { key: i }, l))), h("div", { class: "co-date-range__days" }, cells.map((day, idx) => {
-            if (!day)
-                return h("span", { class: "co-date-range__day co-date-range__day--empty", key: idx });
-            const isStart = day === this.draftFrom;
-            const isEnd = day === this.draftTo;
-            const isRange = this.inRange(day);
-            return (h("button", { key: idx, type: "button", class: {
-                    'co-date-range__day': true,
-                    'co-date-range__day--start': isStart,
-                    'co-date-range__day--end': isEnd,
-                    'co-date-range__day--in-range': isRange && !isStart && !isEnd,
-                }, onClick: () => this.handleDayClick(day), onMouseEnter: () => this.handleDayHover(day), onMouseLeave: () => this.handleDayHover(null) }, parseInt(day.split('-')[2], 10)));
-        }))));
-    }
-    renderPresets() {
-        if (!this.presets)
-            return null;
-        const items = [
-            { id: 'today', label: this.presetTodayLabel },
-            { id: 'thisWeek', label: this.presetThisWeekLabel },
-            { id: 'thisMonth', label: this.presetThisMonthLabel },
-            { id: 'last30Days', label: this.presetLast30DaysLabel },
-            { id: 'last90Days', label: this.presetLast90DaysLabel },
-            { id: 'thisYear', label: this.presetThisYearLabel },
-        ];
-        return (h("div", { class: "co-date-range__presets" }, items.map(p => (h("button", { key: p.id, type: "button", class: "co-date-range__preset", onClick: () => this.handlePresetClick(p.id) }, p.label)))));
     }
     render() {
-        const hasValue = !!(this.draftFrom || this.draftTo);
-        return (h("div", { key: 'd7045dc55fad85c14ea8ed05278f11a91c894e8b', class: "co-date-range", part: "root" }, this.label && h("label", { key: '9a48cd7d9498138ccb1acac2ac8b664c5543b6d1', class: "co-date-range__label", part: "label" }, this.label), h("div", { key: '09379d7ac693bce51da6e131cb60c61d3d16d226', class: {
-                'co-date-range__trigger': true,
-                'co-date-range__trigger--open': this.isOpen,
-                'co-date-range__trigger--disabled': this.disabled,
-                [`co-date-range__trigger--${this.status}`]: this.status !== 'default',
-            }, onClick: this.handleTriggerClick, part: "trigger", tabIndex: this.disabled ? -1 : 0, role: "button" }, h("co-icon", { key: '8f0cf20d2e9e39eb625112bd31b13e03e9723fa3', name: "calendar", size: 16, class: "co-date-range__icon" }), h("span", { key: '394050d776116d98e3f585bb2521b726308cd57c', class: {
-                'co-date-range__trigger-text': true,
-                'co-date-range__trigger-text--placeholder': !hasValue,
-            } }, this.renderTriggerLabel()), this.clearable && hasValue && !this.disabled && (h("button", { key: '6af816bd7d5e1e677943692b2540d5cc1547d230', class: "co-date-range__clear", type: "button", onClick: (e) => { e.stopPropagation(); this.handleClear(); }, "aria-label": "Clear" }, h("co-icon", { key: 'aeb54016fc5b9616e2c4c9656cde0a07cc784d99', name: "x-circle", weight: "fill", size: 16 }))), h("co-icon", { key: '474e9a4b815f977ffaf444f6c568c6adbce393dd', name: "caret-down", size: 14, class: "co-date-range__caret" })), this.helperText && (h("span", { key: 'afc70e80268864a59c7c93623db3542560a08ca7', class: {
-                'co-date-range__helper': true,
-                [`co-date-range__helper--${this.status}`]: this.status !== 'default',
-            }, part: "helper" }, this.helperText)), this.isOpen && (h("div", { key: 'fbfdaf36083d09423e22a578ccead616a7bab704', class: "co-date-range__popover", part: "popover" }, h("div", { key: '43275ecd90419bc6625c9bd59b3fde2fb58f2fb0', class: "co-date-range__popover-body" }, this.renderPresets(), this.renderCalendar()), h("div", { key: 'b32a4217c1f15860ae2f767a1135f35e5f9e4bb8', class: "co-date-range__footer" }, h("button", { key: 'c0c07ad3017a318184bcae0011c3713b6924b16c', type: "button", class: "co-date-range__btn co-date-range__btn--ghost", onClick: this.handleClear }, this.clearLabel), h("button", { key: '234d87a5de1e7c04cad86b50130081bcf9fa17b1', type: "button", class: "co-date-range__btn co-date-range__btn--primary", onClick: this.handleApply, disabled: !this.draftFrom || !this.draftTo }, this.applyLabel))))));
+        return (h("co-date-range-picker", { key: '52a80ab59ff863209e62f5dcddbc674ea32a662c', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": [{
-                "onValueChange": 0
-            }]
-    }; }
 };
 CoDateRange.style = coDateRangeCss();
 

package/dist/esm/co-empty-state.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, h } from './index-BKmfyPZK.js';
 
 const coEmptyStateCss = () => `:host{display:block}.co-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--co-spacing-2xl) var(--co-spacing-xl);font-family:var(--co-font-family-primary);max-width:492px;margin:0 auto}.co-empty-state__icon{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--co-semantic-surface-subtle);color:var(--co-semantic-text-muted);margin-bottom:var(--co-spacing-xl)}.co-empty-state__heading{font-size:var(--co-font-size-20);font-weight:600;color:var(--co-semantic-text-default);margin-bottom:var(--co-spacing-sm)}.co-empty-state__description{font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);line-height:1.5;margin-bottom:var(--co-spacing-xl)}.co-empty-state__actions{display:flex;gap:var(--co-spacing-md);flex-wrap:wrap;justify-content:center}.co-empty-state__actions:empty{display:none}`;
 
@@ -7,7 +7,7 @@ const CoEmptyState = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: 'd414a4b9c7336d6f7cdd467a25be8287cbc61688', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '482eac0c4337a7b8eba92018a8a8f898f44793e1', class: "co-empty-state__icon" }, h("co-icon", { key: '8cb46703a9c8f34277fffd95ffbb1b14c0e89366', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: '2517c9b2524aef5db6516908d63c8c9b4287a53d', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'a4793896bc598d7fbe92b367b8412f18d2643595', class: "co-empty-state__description" }, this.description)), h("div", { key: 'c68653bbc2012b6b8a967400ce3e49e29bc9ef9f', class: "co-empty-state__actions" }, h("slot", { key: '665dccd15ed54b78a0d3f13a94dcd8e65720c8c5' }))));
+        return (h("div", { key: '6ceb9e648d3afd9d00d235be09c062b2271abf81', class: "co-empty-state", part: "empty-state" }, this.icon && (h("div", { key: '126201691f3b95f58c2e1e6a299bd76c6e2469a8', class: "co-empty-state__icon" }, h("co-icon", { key: '60e803bec3cac493264240203003f0b76a58b751', name: this.icon, size: 40, weight: "light" }))), this.heading && (h("div", { key: '9b3a6fc68f92680fe93af4e17defd01979117e92', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'b78224486e9c3b12bb6c4ecccf937f613cc9853e', class: "co-empty-state__description" }, this.description)), h("div", { key: 'b7c66fe9a617b553244f33d35ec515b2c00511ff', class: "co-empty-state__actions" }, h("slot", { key: '6e5cf479c0ecc6ccb0c718d5a062fbbc0836e6d8' }))));
     }
 };
 CoEmptyState.style = coEmptyStateCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-B0lqrhFo.js';
+import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
 
 const coFabCss = () => `:host{display:inline-flex;font-family:var(--co-font-family-primary);line-height:1}.co-fab{display:inline-flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm2);border:none;border-radius:var(--co-border-radius-full);cursor:pointer;font-family:inherit;font-weight:500;white-space:nowrap;box-sizing:border-box;transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;box-shadow:0 4px 12px rgba(31, 28, 27, 0.15)}.co-fab--l{width:56px;height:56px;font-size:var(--co-font-size-16)}.co-fab--m{width:48px;height:48px;font-size:var(--co-font-size-14)}.co-fab--s{width:40px;height:40px;font-size:var(--co-font-size-14)}.co-fab--extended{width:auto;border-radius:var(--co-border-radius-lg)}.co-fab--extended.co-fab--l{padding:0 var(--co-spacing-xl)}.co-fab--extended.co-fab--m{padding:0 var(--co-spacing-lg)}.co-fab--extended.co-fab--s{padding:0 var(--co-spacing-md)}.co-fab--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-fab--primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(31, 28, 27, 0.2);transform:translateY(-1px)}.co-fab--secondary{background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-subtle)}.co-fab--secondary:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-fab--stroke{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-fab--stroke:hover:not(:disabled){background:var(--co-semantic-surface-hover)}.co-fab:active:not(:disabled){transform:translateY(0) scale(0.96)}.co-fab--disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.co-fab--bottom-right{position:fixed;bottom:24px;right:24px;z-index:1000}.co-fab--bottom-left{position:fixed;bottom:24px;left:24px;z-index:1000}.co-fab--top-right{position:fixed;top:24px;right:24px;z-index:1000}.co-fab--top-left{position:fixed;top:24px;left:24px;z-index:1000}.co-fab__label{line-height:1}`;
 
@@ -20,14 +20,14 @@ const CoFab = class {
     render() {
         const iconSize = this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const isExtended = !!this.label;
-        return (h("button", { key: 'd013eaa32fce0e86c428695f172cec6a268452cc', class: {
+        return (h("button", { key: '90ffc7d273a4aca5bbe3214d9f6ba3a8c5d063da', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
                 'co-fab--extended': isExtended,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: '1fa1468cf3a1087a4bc4facc8a29553fe1073812', name: this.icon, size: iconSize }), this.label && h("span", { key: '0c2417e1af3a944dc13a879f39e4d0dd1d1f5e41', class: "co-fab__label" }, this.label)));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: '29745cdc0f20d21d4d5a130d523f7a6839a9927c', name: this.icon, size: iconSize }), this.label && h("span", { key: '9314aa4e634e2bb3280bc9015e6a60b265afca43', class: "co-fab__label" }, this.label)));
     }
 };
 CoFab.style = coFabCss();