@prolibu-suite/cobalt-core 0.10.4 → 0.11.0

package/dist/collection/components/co-document-editor/document-props.js

@@ -0,0 +1,40 @@
+export const DEFAULT_MARGINS = { top: 38, right: 38, bottom: 38, left: 38 };
+const NAMED = new Set(['letter', 'a4', 'legal']);
+/** `true` o `'true'`. Un `'false'` que dejó el multipart de V1 cuenta como falso (spec §3.6). */
+export function toBoolIntent(v) {
+    return v === true || v === 'true';
+}
+export function parsePageSize(v) {
+    if (typeof v === 'string') {
+        if (NAMED.has(v))
+            return v;
+        try {
+            return parsePageSize(JSON.parse(v));
+        }
+        catch (_a) {
+            return 'letter';
+        }
+    }
+    if (v && typeof v === 'object') {
+        const { width, height } = v;
+        if (Number(width) > 0 && Number(height) > 0)
+            return { width: Number(width), height: Number(height) };
+    }
+    return 'letter';
+}
+export function parseMargins(v) {
+    let raw = v;
+    if (typeof v === 'string') {
+        try {
+            raw = JSON.parse(v);
+        }
+        catch (_a) {
+            return Object.assign({}, DEFAULT_MARGINS);
+        }
+    }
+    if (!raw || typeof raw !== 'object')
+        return Object.assign({}, DEFAULT_MARGINS);
+    const m = raw;
+    const pick = (k) => (Number.isFinite(Number(m[k])) && m[k] !== undefined ? Number(m[k]) : DEFAULT_MARGINS[k]);
+    return { top: pick('top'), right: pick('right'), bottom: pick('bottom'), left: pick('left') };
+}

package/dist/collection/components/co-document-editor/header-tools.js

@@ -0,0 +1,11 @@
+/**
+ * Herramientas de la banda del encabezado en edición (interruptor de número de
+ * página + ✓). La fila cuelga ENCIMA de la banda, dentro del margen superior de la
+ * hoja, y el papel tiene `overflow: clip`: tiene que entrar en el margen mínimo
+ * (10 mm = 38 px) o se recorta. `co-icon-button size="sm"` mide 48 px: el tamaño va
+ * por `box-size`. Fila = max(✓, switch de 24) + padding + borde (ver la prueba).
+ */
+export const HEADER_TOOL_BOX_PX = 28;
+export const HEADER_TOOL_ICON_PX = 16;
+/** Margen superior más chico que se admite (10 mm a 96 dpi, el default del componente). */
+export const MIN_TOP_MARGIN_PX = 38;

package/dist/collection/components/co-document-editor/image-bar.js

@@ -0,0 +1,66 @@
+/**
+ * Barra de diseño de imagen (4 modos de V1). Vive DENTRO del papel, que tiene
+ * `overflow: clip`: su posición se decide acá para que nunca quede recortada.
+ * Las medidas son las del CSS (`.co-doc-editor__image-bar` / `__image-mode`,
+ * ver la prueba): se calculan sin medir el DOM porque la barra todavía no existe
+ * cuando se decide dónde va.
+ */
+export const IMAGE_MODE_ICONS = {
+    inline: 'image-square',
+    'wrap-left': 'text-align-left',
+    'wrap-right': 'text-align-right',
+    break: 'rows',
+};
+/** Botón de modo (ancho = alto). */
+export const IMAGE_MODE_BUTTON_PX = 28;
+export const IMAGE_MODE_ICON_PX = 16;
+/** 4 botones × 28 + 3 separaciones de 2 + relleno 2 × 2 + borde 1 × 2. */
+export const IMAGE_BAR_SIZE = { width: 124, height: 34 };
+/** Aire entre la imagen y la barra. */
+export const IMAGE_BAR_GAP_PX = 4;
+/**
+ * Debajo de la imagen (por defecto: una imagen pegada al margen superior no la
+ * saca por arriba); si no entra debajo (final del papel), encima; si tampoco,
+ * dentro de la imagen, sobre su borde inferior. En horizontal se acota al papel.
+ * Un papel sin medidas (0) no acota.
+ */
+export function imageBarPosition(img, sheet, bar = IMAGE_BAR_SIZE, gap = IMAGE_BAR_GAP_PX) {
+    const below = img.top + img.height + gap;
+    const above = img.top - gap - bar.height;
+    let top = below;
+    let placement = 'below';
+    if (sheet.height > 0 && below + bar.height > sheet.height) {
+        if (above >= 0) {
+            top = above;
+            placement = 'above';
+        }
+        else {
+            top = Math.max(0, Math.min(img.top + img.height - gap - bar.height, sheet.height - bar.height));
+            placement = 'inside';
+        }
+    }
+    let left = img.left;
+    if (sheet.width > 0)
+        left = Math.max(0, Math.min(left, sheet.width - bar.width));
+    return { top, left, placement };
+}
+/** `offsetLeft` acumulado hasta `root` (par de `layoutBox`, que da el top). */
+export function layoutLeft(el, root) {
+    let left = 0;
+    let node = el;
+    while (node && node !== root) {
+        left += node.offsetLeft;
+        node = node.offsetParent;
+    }
+    return left;
+}
+/**
+ * Ancho con el que nace una imagen insertada (nota T8 / plan B §6.4): sin `width`,
+ * V1 la abre a 800 px, más que la columna (≈740 en carta). Nunca pasa de la columna.
+ */
+export function defaultImageWidth(naturalWidth, columnWidth) {
+    const natural = naturalWidth > 0 ? naturalWidth : 0;
+    const column = columnWidth > 0 ? columnWidth : 0;
+    const w = natural && column ? Math.min(natural, column) : natural || column;
+    return w ? Math.max(1, Math.round(w)) : null;
+}

package/dist/collection/components/co-document-editor/page-styles.js

@@ -0,0 +1,90 @@
+/**
+ * Acota el CSS de impresión del host (SharedContractUtils: editorCss + defaultCss)
+ * a UNA hoja: cada selector queda bajo `:where(scope)`; `*`, `html`, `body` y `:root`
+ * pasan a ser la hoja (el `*` global de defaultCss no puede escapar a la página).
+ * Se entra en @media/@supports, se conserva @keyframes y se descartan las
+ * reglas que no aplican a pantalla o traerían red (@page, @font-face, @import).
+ */
+const DROP_STATEMENTS = /@(import|charset|namespace)[^;]*;/gi;
+export function scopePageStyles(css, scope) {
+    if (!css)
+        return '';
+    const src = css.replace(/\/\*[\s\S]*?\*\//g, '').replace(DROP_STATEMENTS, '');
+    return scopeBlock(src, scope).trim();
+}
+function matchingBrace(src, open) {
+    let depth = 0;
+    let quote = null;
+    for (let i = open; i < src.length; i += 1) {
+        const c = src[i];
+        if (quote) {
+            if (c === quote && src[i - 1] !== '\\')
+                quote = null;
+            continue;
+        }
+        if (c === '"' || c === "'")
+            quote = c;
+        else if (c === '{')
+            depth += 1;
+        else if (c === '}') {
+            depth -= 1;
+            if (depth === 0)
+                return i;
+        }
+    }
+    return -1;
+}
+/**
+ * El scope va dentro de `:where()`: especificidad 0. Cada regla del host conserva la
+ * especificidad que tenía en el PDF, y la geometría propia de la hoja (clases del
+ * componente, ≥ (0,1,0)) le gana a sus resets (`* { padding: 0 }`, `.tiptap table td`…).
+ *
+ * Excepción del `*`: en el PDF es CSS de autor y le gana a la UA de `pre`/`code`
+ * (`font-family: monospace`). En la app, el normalize global (Quasar: `code, kbd, pre, samp
+ * { font-family: monospace }`, (0,0,1)) es de autor y le ganaba al `:where(scope) *` (0,0,0):
+ * un bloque de código medía distinto en la hoja que en el PDF. `:where(scope) :is(pre, code)`
+ * sube el reset a (0,0,1): empata con el normalize y gana por orden (el `<style>` de la hoja
+ * vive dentro del documento, después de las hojas globales del `<head>`), y sigue perdiendo
+ * contra cualquier regla del host más específica o posterior (`.tiptap pre`, `pre {…}`), como en
+ * el PDF. `inherit` desde la hoja no sirve: un `pre` hijo directo de `.ProseMirror` heredaría la
+ * fuente del contenedor (Geist) y no la del `*` (Roboto) que ve el PDF.
+ */
+function scopeSelector(sel, scope) {
+    const s = sel.trim();
+    if (!s)
+        return '';
+    const root = `:where(${scope})`;
+    if (s === '*')
+        return `${root}, ${root} *, ${root} :is(pre, code)`;
+    const rest = s.replace(/^(?:(?:html|body|:root)(?=$|[\s>+~.#:[])\s*)+/i, '').trim();
+    return rest ? `${root} ${rest}` : root;
+}
+function scopeBlock(src, scope) {
+    let out = '';
+    let i = 0;
+    while (i < src.length) {
+        const open = src.indexOf('{', i);
+        if (open === -1)
+            break;
+        const close = matchingBrace(src, open);
+        if (close === -1)
+            break;
+        const prelude = src.slice(i, open).trim();
+        const body = src.slice(open + 1, close);
+        i = close + 1;
+        if (!prelude)
+            continue;
+        if (prelude.startsWith('@')) {
+            const at = prelude.slice(1).split(/[\s(]/)[0].toLowerCase();
+            if (at === 'media' || at === 'supports')
+                out += `${prelude}{${scopeBlock(body, scope)}}`;
+            else if (at.endsWith('keyframes'))
+                out += `${prelude}{${body}}`;
+            continue; // @page, @font-face y cualquier otra at-rule: fuera
+        }
+        const selectors = prelude.split(',').map((x) => scopeSelector(x, scope)).filter(Boolean);
+        if (selectors.length)
+            out += `${selectors.join(', ')}{${body}}`;
+    }
+    return out;
+}

package/dist/collection/components/co-document-editor/zoom.js

@@ -0,0 +1,45 @@
+/** Aire lateral que se descuenta del lienzo al ajustar al ancho (2 × --co-spacing-lg). */
+export const ZOOM_GUTTER_PX = 32;
+/** Escala para que la hoja entre en el ancho disponible: nunca agranda, nunca baja de 25 %. */
+export function fitScale(available, pageWidth) {
+    if (!(available > 0) || !(pageWidth > 0))
+        return 1;
+    const s = Math.min(1, Math.max(0.25, available / pageWidth));
+    return Math.round(s * 1000) / 1000;
+}
+/** Tope del zoom libre (pinza / ctrl+rueda). El piso es el mismo de «Ajustar al ancho». */
+export const ZOOM_MIN = 0.25;
+export const ZOOM_MAX = 3;
+/** Acota la escala a [ZOOM_MIN, ZOOM_MAX] y la redondea a milésimas (NaN → 1). */
+export function clampScale(scale) {
+    if (!Number.isFinite(scale))
+        return 1;
+    return Math.round(Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, scale)) * 1000) / 1000;
+}
+/**
+ * Nueva escala para un evento `wheel` con ctrlKey (la pinza del trackpad llega así en Chrome,
+ * Edge y Firefox; también ctrl+rueda del mouse). Exponencial: acercar y alejar el mismo delta
+ * vuelve al punto de partida, y la velocidad se siente igual a cualquier escala.
+ */
+export function pinchScale(current, deltaY) {
+    if (!Number.isFinite(deltaY))
+        return current;
+    return clampScale(current * Math.exp(-deltaY * 0.01));
+}
+/**
+ * Punto del papel (px de layout, sin escala) bajo el cursor: `stageStart` es el borde de la hoja
+ * escalada en pantalla (getBoundingClientRect), `scale` la escala que el DOM refleja HOY.
+ */
+export function paperPoint(client, stageStart, scale) {
+    if (!(scale > 0))
+        return 0;
+    return (client - stageStart) / scale;
+}
+/**
+ * Cuánto hay que correr el scroll para que el punto `paper` vuelva a quedar bajo el cursor,
+ * medido DESPUÉS del render con la escala nueva (la hoja está centrada y el lienzo tiene
+ * relleno fijo: predecir la posición falla, medirla no).
+ */
+export function anchorCorrection(stageStart, paper, scale, client) {
+    return stageStart + paper * scale - client;
+}

package/dist/collection/components/co-drive-card/co-drive-card.js

@@ -74,7 +74,7 @@ export class CoDriveCard {
     }
     render() {
         const isFile = this.variant === 'file';
-        return (h("div", { key: 'd21cc658d8a825973bf2662166792e2645cb7919', class: {
+        return (h("div", { key: 'fba210f4eb2629fdbc599cacd37bb547b43f01a7', class: {
                 'co-drive-card': true,
                 [`co-drive-card--${this.variant}`]: true,
                 [`co-drive-card--${this.density}`]: true,

package/dist/collection/components/co-drop-zone/co-drop-zone.js

@@ -58,7 +58,7 @@ export class CoDropZone {
         this.coDragStateChange.emit(next);
     }
     render() {
-        return (h(Host, { key: '8c054ca976730d2a6d31026a7da431e38fb61d9d', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: '478ff353fc8c88d719a054bdd302ffeeec06a238' }), this.active && (h("div", { key: '64310825f2556838d525541f6dba33af521f1c2f', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '5567646e887cfd23a4c5e987cc0f9b7cbcda247e', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '8b50b8e1615d13efaad52ef03ede3afdc4dd7869', name: this.icon, size: 34 })), h("span", { key: '10209ab792204eff4ddc86c08aac950cfae50ec1', class: "co-drop-zone__label", part: "label" }, this.label)))));
+        return (h(Host, { key: 'ae0d0449a7c0057dcdf527bb67196745b9173852', class: { 'co-drop-zone': true, 'co-drop-zone--active': this.active }, part: "host", style: { '--co-drop-zone-accent': this.accent }, onDragEnter: this.handleDragEnter, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("slot", { key: '28e0b0232514e4d936eb6c4a5e5096a9eb9b20eb' }), this.active && (h("div", { key: '21f78c6c91184f1e6f8ef0f8d37f4ce0f2db73a6', class: "co-drop-zone__overlay", part: "overlay" }, h("div", { key: '1e413d3eb21b4425d7b47834fdc23e84b35c890d', class: "co-drop-zone__badge", part: "badge" }, h("co-icon", { key: '7d3f145bdf6fae71b31ee8e77ac9243d2101c740', name: this.icon, size: 34 })), h("span", { key: '1ed93eabef61c01cedfcf94cd4a31c8a1968ce90', class: "co-drop-zone__label", part: "label" }, this.label)))));
     }
     static get is() { return "co-drop-zone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-emoji-picker/co-emoji-picker.js

@@ -383,14 +383,14 @@ export class CoEmojiPicker {
         const stripCategories = hasRecent
             ? [RECENT_CATEGORY, ...EMOJI_CATEGORIES]
             : [...EMOJI_CATEGORIES];
-        return (h("div", { key: '7c7dfc4be7b8f8ea44df0f6c988cd2462b5fbdab', class: "co-emoji-picker", part: "panel", role: "group", "aria-label": this.label || s.pickerLabel, style: { '--co-emoji-picker-columns': String(Math.max(1, this.columns)) }, onKeyDown: this.handleKeyDown }, this.searchable && (h("div", { key: 'd25a0e16ced7efd0bc92b2dd104e60ea926ae042', class: "co-emoji-picker__search", part: "search" }, h("co-icon", { key: '72d9381c9e5375e2a1f7c8a01ca4d5e9d9c69b5c', name: "magnifying-glass", size: 16 }), h("input", { key: '5dc6d956f35f8497e35915faf1eb6bec424e0978', class: "co-emoji-picker__input", part: "input", type: "text", value: this.term, placeholder: this.searchPlaceholder || s.searchPlaceholder, onInput: this.handleInput, ref: (el) => (this.inputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": CoEmojiPicker.GRID_ID, "aria-activedescendant": activeCellId }), this.renderTones())), this.showCategories && (h("div", { key: 'f590a30901ad79dffe872381ac7d19f3bb8e4185', class: "co-emoji-picker__categories", part: "categories", "aria-label": s.categoriesLabel }, !this.searchable && this.renderTones(), stripCategories.map((category) => {
+        return (h("div", { key: '75eb6f07186ba466fa831f35d3a1d4c0283276bc', class: "co-emoji-picker", part: "panel", role: "group", "aria-label": this.label || s.pickerLabel, style: { '--co-emoji-picker-columns': String(Math.max(1, this.columns)) }, onKeyDown: this.handleKeyDown }, this.searchable && (h("div", { key: 'd785f750db7b96d40bc4d48f8110f355dd25ddc2', class: "co-emoji-picker__search", part: "search" }, h("co-icon", { key: 'c2f74a0cae224a5ad92dfe79cd88c39324004531', name: "magnifying-glass", size: 16 }), h("input", { key: '98221cd4dea82d03dc652c7db4b4ee19bb44c722', class: "co-emoji-picker__input", part: "input", type: "text", value: this.term, placeholder: this.searchPlaceholder || s.searchPlaceholder, onInput: this.handleInput, ref: (el) => (this.inputEl = el), role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": CoEmojiPicker.GRID_ID, "aria-activedescendant": activeCellId }), this.renderTones())), this.showCategories && (h("div", { key: '7124c7d0fb624678207c409254eb0514346447f8', class: "co-emoji-picker__categories", part: "categories", "aria-label": s.categoriesLabel }, !this.searchable && this.renderTones(), stripCategories.map((category) => {
             var _a, _b;
             const name = (_a = s.categories[category]) !== null && _a !== void 0 ? _a : category;
             return (h("button", { type: "button", key: category, class: {
                     'co-emoji-picker__category': true,
                     'co-emoji-picker__category--active': category === activeCategory,
                 }, "aria-label": name, "aria-current": category === activeCategory ? 'true' : undefined, title: name, onClick: () => this.jumpToCategory(category) }, h("co-icon", { name: (_b = EMOJI_CATEGORY_ICONS[category]) !== null && _b !== void 0 ? _b : 'circle', size: 16 })));
-        }))), h("div", { key: 'e2d0322703aef9efdf8b0aeec6b5021fbfaa15f8', class: "co-emoji-picker__scroll", part: "grid", id: CoEmojiPicker.GRID_ID, role: "listbox", "aria-label": s.gridLabel, ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll }, isEmpty ? (h("div", { class: "co-emoji-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage || s.emptyMessage))) : (this.renderRows(rows)))));
+        }))), h("div", { key: '5e941a4ec0594953dcc5bac59d0bef1f3ce53712', class: "co-emoji-picker__scroll", part: "grid", id: CoEmojiPicker.GRID_ID, role: "listbox", "aria-label": s.gridLabel, ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll }, isEmpty ? (h("div", { class: "co-emoji-picker__empty" }, h("co-icon", { name: "magnifying-glass", size: 20 }), h("span", null, this.emptyMessage || s.emptyMessage))) : (this.renderRows(rows)))));
     }
     static get is() { return "co-emoji-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-empty-state/co-empty-state.js

@@ -13,11 +13,11 @@ export class CoEmptyState {
     render() {
         var _a;
         const iconWeight = (_a = this.iconWeight) !== null && _a !== void 0 ? _a : (this.variant === 'card' ? 'regular' : 'light');
-        return (h("div", { key: '4011b99b59671ad38cf5c90b5adc1b42a0353817', class: {
+        return (h("div", { key: '191c38c574ecf961bbeffc83783e820e5dfdde0c', class: {
                 'co-empty-state': true,
                 [`co-empty-state--${this.variant}`]: true,
                 [`co-empty-state--${this.size}`]: true,
-            }, part: "empty-state" }, this.icon && (h("div", { key: 'a6899c6690bb8b9fcdd858fb63a30644b7094672', class: "co-empty-state__icon" }, h("co-icon", { key: '312945448815ae5be78074e03840909b04e5f3c4', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '7fd7fdb5fc4922bf2c7d6aab5200bc80947c20ba', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'da5cddc1aa7afc32ee30f59293f66f1e30507614', class: "co-empty-state__description" }, this.description)), h("div", { key: '940a1b9ffa4022a3ee2623b7a6892000c63abfd4', class: "co-empty-state__actions" }, h("slot", { key: 'b6b9fbd93e79890193500d5c3bbbe72d32fa1e20' }))));
+            }, part: "empty-state" }, this.icon && (h("div", { key: '4e6c36922ed59f5d65f5ce73f261eb3ccdc72e35', class: "co-empty-state__icon" }, h("co-icon", { key: '5dc6b8fb6c67539ea16e2171676e2b5de96ca194', name: this.icon, size: 40, weight: iconWeight }))), this.heading && (h("div", { key: '4be3d32fda76c0e603651507cc1bd1c3b2d6fad9', class: "co-empty-state__heading" }, this.heading)), this.description && (h("div", { key: 'ee920e1eb636a1a55a0f9d32145f69c16d072b52', class: "co-empty-state__description" }, this.description)), h("div", { key: 'eb22109eab803e58eec32d8603aefa783b1e2d17', class: "co-empty-state__actions" }, h("slot", { key: '14f7583ee7ef6db2e0e5d38eb336d3d4469e7fd7' }))));
     }
     static get is() { return "co-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-calendar/co-event-calendar.js

@@ -223,10 +223,10 @@ export class CoEventCalendar {
         const t = getDateStrings(this.locale);
         const views = this.viewsList;
         const a = parseISO(this.anchor);
-        return (h("div", { key: 'eb07a859a28ba0d09a3880a77a5b122c1ae063fb', class: "cal" }, h("div", { key: '693683cddfad9a1aed4be0bf3651cfff8b2ba1c7', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '48f8fc44179b2950ea0498205f8f8a5d91d33e04', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '387a1cee67da85bf72e791ca2adc67f7482eb629', class: "cal__title-group" }, h("button", { key: '24d316422fb98f7d7c66ed6154a90f54a56cab12', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'd0c575fce693943e91de8c578bb3371bfdb6425a', name: "caret-left", size: 16 })), h("h2", { key: '1bc26dd2c49d67854a1fc922cffc519485437f6a', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '0e152157ed337011d00699b450b6a5cd10016b97', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'c821a72abc278e325cadfeae54b4d2b05984d3ba', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+        return (h("div", { key: '21a10260d591309d68ecb02004ea1160fa8eab8b', class: "cal" }, h("div", { key: '4d4038feb333d2da935dd46bf058b876b0ca7657', class: "cal__toolbar", part: "toolbar" }, h("button", { key: '79e01f296686ade3bd8c8598fd26e0e304122d7f', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("div", { key: '9f4e4fb351b96bad31dbd6cb7628bd4171434709', class: "cal__title-group" }, h("button", { key: '511837460816d0ebbe542995c72fcc6d08ec4671', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'cb7cd8b28e0502c9da1611f4e28d6ff3bee86652', name: "caret-left", size: 16 })), h("h2", { key: '7892530164e755daba2c8f1ea39661fc40ecf852', class: "cal__title", "aria-live": "polite" }, this.title()), h("button", { key: '56297f90364a3628bac3d2e1d3080339ba8b27e1', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: '2576d8083c47024e243e7de7019433de80ec6126', name: "caret-right", size: 16 }))), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
             var _a;
             return (h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
-        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '2472ed0d314a489f41f2f46dc7988ce8860a64c2', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '48b98ddc4835df8bfa3b3654e197983966002b10', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { loading: this.loading, events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : this.view === 'week' || this.view === 'day' ? (h("co-calendar-timegrid", { loading: this.loading, events: this.normalized, dates: this.visibleDates, locale: this.locale, timeZone: this.tz, editable: this.editable, selectable: this.selectable, minDate: this.minDate, maxDate: this.maxDate, onCoRangeSelect: this.handleRangeSelect, onCoEventClick: this.handleEventClick, onCoEventDblClick: this.handleEventDblClick, onCoEventDrop: this.handleEventDrop, defaultDurationMinutes: this.defaultDurationMinutes, allDaySlot: this.allDaySlot, minTime: this.minTime, maxTime: this.maxTime, slotMinutes: this.slotMinutes, snapMinutes: this.snapMinutes, scrollTime: this.scrollTime, nowIndicator: this.nowIndicator })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
     }
     static get is() { return "co-event-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-event-popover/co-event-popover.js

@@ -118,7 +118,7 @@ export class CoEventPopover {
         this.coClose.emit();
     }
     render() {
-        return (h(Host, { key: '8febb91e9c26e67bdd8edde9bd95e24b9a6f4b04' }, h("div", { key: '1311c574b0bae76fb85952da3b5e8531d77e1b25', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '9d275e1b245f0bd4f95ba13743d6a9080b3d581a', class: "pop__actions", part: "actions" }, h("slot", { key: '322fefefddfe8ba575185fa093a980197f267311', name: "actions" })), h("div", { key: '22243bc4a6d4723843c490b9fa41796f31f401f8', class: "pop__head" }, this.dot && h("span", { key: '09d3e746f133432f0946e023e93aa92bcf5f9952', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '27d6f3ca1896ea02e08515db3fc8a7a58a51daeb', class: "pop__body", part: "body" }, h("slot", { key: 'd098bfca183fe303f6cb85f496f7ed1914b5e26b' }))))));
+        return (h(Host, { key: 'a646f722530e2198c0a0b082de540021be9cc9c0' }, h("div", { key: 'b9937d848335d6d5e21ac34d392a842815c51ffe', class: "pop", popover: "manual", role: "dialog", "aria-modal": "false", "aria-label": this.popoverLabel, tabIndex: -1, ref: (el) => (this.panelEl = el) }, h("div", { key: '81b409086819ab1623fc2759742795bd9b3fca28', class: "pop__actions", part: "actions" }, h("slot", { key: '21080d17fc497bcc7d0f537397686ddb03e0cd60', name: "actions" })), h("div", { key: '1a6e0ab2801ae963579e4f50b8132fe3f26d84f9', class: "pop__head" }, this.dot && h("span", { key: '04abf696922f1a93b15ab3b9066782bc9b08a89d', class: "pop__dot", style: this.color ? { background: this.color } : {} }), h("div", { key: '659f842611275562d4617d2f1f6ecbc73920d914', class: "pop__body", part: "body" }, h("slot", { key: 'b5606cdff567ae0f16bb2dcf228987de3b376d34' }))))));
     }
     static get is() { return "co-event-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-fab/co-fab.js

@@ -28,7 +28,7 @@ export class CoFab {
         const iconSize = this.size === 'xl' ? 24 : this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const hasLabel = !!this.label;
         const hoverExpand = hasLabel && this.expandOnHover;
-        return (h("button", { key: 'f0d1612601922430df403628c5349b322ee8e88d', class: {
+        return (h("button", { key: '5ac75328c6505b000c84e5f5365abfabad1dc831', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
@@ -36,7 +36,7 @@ export class CoFab {
                 'co-fab--hover-expand': hoverExpand,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: 'fc53d94af9263b20cfce36656608962158d480ab', name: this.icon, size: iconSize }), this.label && (h("span", { key: '5a16cdace79b8fb7b6ead260d14ee4ae018ed02b', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, onPointerEnter: this.handleExpandMeasure, onFocusin: this.handleExpandMeasure, "aria-label": this.ariaLabelText || this.label || this.icon }, h("co-icon", { key: '9bde6e77c635eb64bca7cc7e129eb2ebe4f8a004', name: this.icon, size: iconSize }), this.label && (h("span", { key: '412f43091a9ba740b1ceddbe1539f60e3d1c27d1', class: "co-fab__label", ref: (el) => (this.labelEl = el) }, this.label))));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-field/co-file-field.js

@@ -358,12 +358,12 @@ export class CoFileField {
         const previews = this.previewItems();
         const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
         const capacity = this.capacityHint(s);
-        return (h("div", { key: '47a8258c141901fcb3621a24d638f0849946172e', class: {
+        return (h("div", { key: 'af16871d531125d82a3fc5ba0ab5a08ca6e67756', class: {
                 'co-file-field': true,
                 'co-file-field--disabled': this.disabled,
                 'co-file-field--invalid': this.isInvalid,
                 [statusClass]: !!statusClass,
-            }, part: "wrapper" }, this.label && (h("div", { key: '603d04815a5730f45a2462d6c2904de4c7aa83af', class: "co-file-field__labels" }, h("label", { key: 'e280970feef1f6fad7c9ce336a5002746231a7c6', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '075b35392df1a5be556dcc9dcbd2130d0a3c91a1', required: this.required })))), showDropzone && (h("div", { key: 'd9dec9f08bc063239bd7b75acc43813ab3f9aebb', class: {
+            }, part: "wrapper" }, this.label && (h("div", { key: '9eb9c80a6c23b24be12b2410fd5713c4ab62965d', class: "co-file-field__labels" }, h("label", { key: '3b577dd00ea6cfa4635bd016dcde4604f6b01dd3', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: '2d41558573a614e7f7fa654dad622d36e6e35ffa', required: this.required })))), showDropzone && (h("div", { key: 'ad4215799a768078703d78b4b38689d987e8a13b', class: {
                 'co-file-field__dropzone': true,
                 'co-file-field__dropzone--drag': this.dragOver,
             }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
@@ -371,7 +371,7 @@ export class CoFileField {
                     e.preventDefault();
                     this.handleBrowse();
                 }
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: '61afb508be3e46257e2ffdb2bdc62d66e37055ed', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '96bb8ef3107abbee44fb5bd7c80ff2cbf39915ec', name: "file-arrow-up", size: 18 }), h("span", { key: '53950664f09064e29d1427530058e0634b287a92' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'de085f9dac492ea1b7db278a34e25ec2a8baa1d3', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '1617a52c9773a31ff8617e7310401a95911ecc2f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: 'f6f07691b5ec339f2ae0fa302415dd3dba04fe69', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'b5332b03438a34a82ffb565b1d2901a69729af61', name: "actions" })), h("input", { key: '5d0089ebcd857f1fa97bedcd743ab0530e75715a', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'cec19c438ec510dbae564c33dd3e6b739e156294', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'e97f2fe09fb30521d5b22238d2714d8f1002a2ed', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '569f37799d34182ff00996dd011232daf7f141a8', class: "co-file-field__previews", part: "previews" }, previews.map((item) => {
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'e32603408a107ad2fbd5ab158b1ca52c7c858833', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: 'dd5e41181e235722531cca15f289c54754a301ee', name: "file-arrow-up", size: 18 }), h("span", { key: '842ac546197c761eb9732504ae0dbae7967ceb49' }, this.uploadButtonText || s.uploadButton)), h("span", { key: '1f53b0376ff5ff0b6b0adecf808a846af7628d9a', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '2df578f0c6717255ba18cc5da64f5fda34f3714f', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '0f0cd178f617119623edb6bc042d8f0647e48527', class: "co-file-field__actions", part: "actions" }, h("slot", { key: 'a2238c3ae9732e96574447aeab9948959e27445a', name: "actions" })), h("input", { key: '2ad962b5becf263b05ebb72492afa89db9e81e47', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'd49f51126e68860782ca184eef99b6f74a0fd94b', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'bbc88a36167076a64d244886b3d8c6f388e065d5', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '108e8dbcb0fb47d397c765400ea2333d83fb0d57', class: "co-file-field__previews", part: "previews" }, previews.map((item) => {
             const key = this.keyFor(item);
             const video = isVideo(item);
             // A video without a usable poster still gets a card — the
@@ -382,7 +382,7 @@ export class CoFileField {
                     'co-file-field__preview': true,
                     'co-file-field__preview--video': video,
                 }, part: "preview", type: "button", key: `prev-${key}`, title: item.name, "aria-label": `${video ? s.playVideo : s.openPreview}: ${item.name}`, onClick: () => this.handlePreviewOpen(item) }, showImg && (h("img", { src: video ? poster : item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })), video && (h("span", { class: "co-file-field__preview-play", "aria-hidden": "true" }, h("span", { class: "co-file-field__preview-play-badge" }, h("co-icon", { name: "play", size: 20, weight: "fill" })), !poster && (h("span", { class: "co-file-field__preview-ext" }, fileExtension(item).toUpperCase()))))));
-        }))), h("ul", { key: '2de5c71b79f82cd50c5aea5818d9848956eeb1eb', class: "co-file-field__list", part: "list" }, items.map((item) => {
+        }))), h("ul", { key: '876616fa30a35a3f3597d2043fb1ce09cf6d12b5', class: "co-file-field__list", part: "list" }, items.map((item) => {
             const key = this.keyFor(item);
             const draggable = canReorder && item.status === 'done';
             return (h("li", { class: {
@@ -406,10 +406,10 @@ export class CoFileField {
                     'co-file-field__action': true,
                     'co-file-field__action--copied': this.copiedKey === key,
                 }, type: "button", tabIndex: -1, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 })))), !this.disabled && !this.readonly && (h("co-tooltip", { content: s.removeFile }, h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 }))))));
-        })))), helper && (h("div", { key: 'a6a14de91f12490b54717153520e3f59b9c9ef10', class: {
+        })))), helper && (h("div", { key: 'b6600a528ff6e9e3302bf889e58fac59edfeab2d', class: {
                 'co-file-field__helper': true,
                 'co-file-field__helper--error': this.isInvalid,
-            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '500ff53b0e1b4f894891bfc3f442ca170a2da2d0', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: 'c723bcbf23a6bcecb9f781aede09120f78fe9b55', class: "co-file-field__helper-text" }, helper)))));
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '22d4218f3df57544633322761c905af8c4398f26', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: 'c7e02e0931ba3ea0bb6e3a6f5381e86ddbf982f1', class: "co-file-field__helper-text" }, helper)))));
     }
     static get is() { return "co-file-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-type-tile/co-file-type-tile.js

@@ -15,7 +15,7 @@ export class CoFileTypeTile {
         const iconSize = Math.round(this.size * 0.5);
         const background = this.colorTags ? meta.tint : 'var(--co-color-gray-100)';
         const color = this.colorTags ? meta.accent : 'var(--co-color-gray-600)';
-        return (h("span", { key: '0cbc40f94f5d917b4f3c35e0a9678daa81a58624', class: {
+        return (h("span", { key: 'bf16f0141f09189575a7333030affb4e365f7de5', class: {
                 'co-file-type-tile': true,
                 [`co-file-type-tile--${type}`]: true,
                 'co-file-type-tile--mono': !this.colorTags,
@@ -25,7 +25,7 @@ export class CoFileTypeTile {
                 borderRadius: `${this.radius}px`,
                 background,
                 color,
-            } }, h("co-icon", { key: 'c5245ababcc734116d4e71dd48e41bf66d02fdff', name: meta.icon, size: iconSize, weight: "fill" })));
+            } }, h("co-icon", { key: 'e194cb5de679470c57774c83d852522b9ce77b31', name: meta.icon, size: iconSize, weight: "fill" })));
     }
     static get is() { return "co-file-type-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-gradient-bar/co-gradient-bar.css

@@ -0,0 +1,138 @@
+/* co-gradient-bar — barra de paradas de un degradado (popover de relleno) */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* Inset de 8px a cada lado: un handle de 16 centrado en 0% o 100% queda justo
+   dentro del host, sin sobresalir. Arriba, 9px: el cuadrado va centrado sobre
+   el borde superior del track (maqueta Figma 05-rect-gradiente), así que
+   sobresale 8px + 1px de halo opcional. */
+.co-gradient-bar {
+  position: relative;
+  padding: 9px 8px 0;
+  box-sizing: border-box;
+}
+
+/* ── Track ─────────────────────────────────────────────────────────────── */
+.co-gradient-bar__track {
+  position: relative;
+  height: 24px;
+  border-radius: 6px;
+  cursor: copy;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Damero debajo del degradado cuando alguna parada es translúcida. */
+.co-gradient-bar--transparent .co-gradient-bar__track {
+  background: conic-gradient(var(--co-color-gray-200) 25%, #ffffff 0 50%, var(--co-color-gray-200) 0 75%, #ffffff 0) 0 0 / 12px 12px;
+}
+
+.co-gradient-bar__fill {
+  position: absolute;
+  inset: 0;
+  border-radius: 6px;
+  pointer-events: none;
+}
+
+/* Borde hairline por encima del degradado; como box-shadow interior no corre
+   el contenido (0% y 100% coinciden con los bordes del track). */
+.co-gradient-bar__track::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-hairline);
+  pointer-events: none;
+}
+
+/* ── Handles ───────────────────────────────────────────────────────────── */
+/* Cuadrado de 16 centrado SOBRE EL BORDE SUPERIOR del track (centro = y del
+   borde), como en la maqueta: la mitad de arriba queda fuera de la barra y el
+   puntero apunta hacia abajo, dentro del degradado. */
+.co-gradient-bar__handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  transform: translate(-50%, -50%);
+  border-radius: 3px;
+  border: 2px solid var(--co-color-opacity-negro-16);
+  /* Chip partido como en Figma: mitad izquierda el color opaco, mitad derecha
+     el color real (con su alpha) sobre un damero. En un stop opaco ambas
+     mitades son iguales y el chip se ve liso. */
+  background:
+    linear-gradient(to right, var(--co-gradient-bar-stop-opaque, var(--co-gradient-bar-stop-color)) 50%, transparent 50%),
+    linear-gradient(var(--co-gradient-bar-stop-color), var(--co-gradient-bar-stop-color)),
+    conic-gradient(var(--co-color-gray-200) 25%, #ffffff 0 50%, var(--co-color-gray-200) 0 75%, #ffffff 0) 0 0 / 6px 6px;
+  /* Halo de 1px por fuera, opcional: el export de Figma no lo trae, así que el
+     default es transparent; el host lo enciende con
+     --co-gradient-bar-handle-halo (p.ej. blanco-80) si necesita silueta sobre
+     un tramo del degradado del mismo color. No cambia los 16px.
+     Sombra del handle: variable con el default de siempre (--co-shadow-sm2)
+     como fallback; el export de Figma (05-rect-gradiente) NO lleva sombra en
+     los handles, así que el host que quiera el look exacto pone
+     `--co-gradient-bar-handle-shadow: none`. Sin la variable, cero cambio. */
+  box-shadow:
+    0 0 0 1px var(--co-gradient-bar-handle-halo, transparent),
+    var(--co-gradient-bar-handle-shadow, var(--co-shadow-sm2));
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+  z-index: 1;
+}
+
+/* Puntero 6×2 colgando del cuadrado hacia abajo (justo bajo el borde
+   exterior; el containing block es la caja de padding, de ahí el +2px del
+   borde), del color del trazo. */
+.co-gradient-bar__handle::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: calc(100% + 2px);
+  width: 6px;
+  height: 2px;
+  transform: translateX(-50%);
+  border-radius: 1px;
+  background: var(--co-color-opacity-negro-16);
+}
+
+.co-gradient-bar__handle--selected {
+  border-color: var(--co-semantic-accent);
+  z-index: 2;
+}
+
+.co-gradient-bar__handle--selected::after {
+  background: var(--co-semantic-accent);
+}
+
+/* Anillo de foco por teclado — solo :focus-visible (misma regla que co-icon-button). */
+.co-gradient-bar__handle:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--co-gradient-bar-handle-halo, transparent),
+    0 0 0 2px var(--co-semantic-border-focus),
+    var(--co-gradient-bar-handle-shadow, var(--co-shadow-sm2));
+}
+
+.co-gradient-bar--dragging .co-gradient-bar__handle {
+  cursor: grabbing;
+}
+
+/* ── Disabled ──────────────────────────────────────────────────────────── */
+.co-gradient-bar--disabled {
+  opacity: 0.4;
+}
+
+.co-gradient-bar--disabled .co-gradient-bar__track,
+.co-gradient-bar--disabled .co-gradient-bar__handle {
+  cursor: not-allowed;
+}