@prolibu-suite/cobalt-core 0.3.0 → 0.4.0

package/dist/collection/components/co-app-shell/co-app-shell.js

@@ -16,10 +16,10 @@ export class CoAppShell {
         this.contentCard = true;
     }
     render() {
-        return (h(Host, { key: '5df857b1122c6dd0589b86873e321a425ffd6dbc' }, h("aside", { key: '4427047dcc3f1316398300e26bc0f8798dc25db2', class: "sidebar", part: "sidebar" }, h("div", { key: '33652ac6919e6c5d9519fa4c2dcaa2820f356cc5', class: "sidebar__header", part: "sidebar-header" }, h("slot", { key: 'ec3a1a5979594acab40f90e44a344fb100db2c20', name: "sidebar-header" })), h("div", { key: 'f0688f52d20a6edbf939728fde84cad7b86bf2b5', class: "sidebar__body", part: "sidebar-body" }, h("slot", { key: '572aced266588d3b11894dfa012d218bf47a5adf', name: "sidebar" })), h("div", { key: 'a8695d8875430d1dddc7d0e93c0cc69ad188aa50', class: "sidebar__footer", part: "sidebar-footer" }, h("slot", { key: 'd70f3553b94c62ffed5ee2a8e2a3e121945df1d7', name: "sidebar-footer" }))), h("div", { key: '3096910efd4d3c61d97d18284a3926273a60b220', class: "main", part: "main" }, h("div", { key: '3f4b2591d4aaddd2fdc14cd3d51341783b5ce1ea', class: "main__card", part: "card" }, h("header", { key: 'd9c464d4a0246099d30b3102430afb00e8f248f6', class: "main__header", part: "header" }, h("slot", { key: '94ec52ee636f22e5870b90d39a3b6cc3c6cc6920', name: "navbar" })), h("main", { key: 'f521001dfda2cf8fc98931c291a6a0829367154a', class: {
+        return (h(Host, { key: '36bab4f303ed9bb7a4dc884800b59e1c21bd5950' }, h("aside", { key: '6b60d962528d0416cb6d7f96726c09bc8f1fcb4f', class: "sidebar", part: "sidebar" }, h("div", { key: 'ff4707443560c1fbb428166011d6556140b4010d', class: "sidebar__header", part: "sidebar-header" }, h("slot", { key: '1a43fd68d866678faa456fe0c1b138123344ee12', name: "sidebar-header" })), h("div", { key: '908525892ae44cc57c555766fffdf2cc0a81d947', class: "sidebar__body", part: "sidebar-body" }, h("slot", { key: 'b35c857069a4de2d43eafbf26d17d137f2ef38d3', name: "sidebar" })), h("div", { key: '9254bee67169b01113c938aa772bdab31c47b731', class: "sidebar__footer", part: "sidebar-footer" }, h("slot", { key: 'f4b9b7f91743da056d1f349f20cf16bec8aca993', name: "sidebar-footer" }))), h("div", { key: '46efc8e873f0c9f985cad87bbb9aeac1ad97a827', class: "main", part: "main" }, h("div", { key: '5e43d38ca7383377025f19f65bd2c2c14828d758', class: "main__card", part: "card" }, h("header", { key: 'a34fa61e205561f40703c85d38101a46aca2c459', class: "main__header", part: "header" }, h("slot", { key: '179c73f3055ed8c58fe27f9e6429c1ee1b1ca51e', name: "navbar" })), h("main", { key: '9ce5147a0e8d003dbf469e776babee36dd5ad236', class: {
                 'main__content': true,
                 'main__content--card': this.contentCard,
-            }, part: "content" }, h("slot", { key: '0f339d0bdfc1352551bc10c0ce3a54c4a757722e' }))))));
+            }, part: "content" }, h("slot", { key: '3c974bfff9cd265f45ebdf90a870ab0e294e8bf9' }))))));
     }
     static get is() { return "co-app-shell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,12 +32,17 @@ export class CoAvatar {
         };
     }
     render() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         const dim = (_a = SIZE_MAP[this.size]) !== null && _a !== void 0 ? _a : 56;
         const iconSize = (_b = ICON_SIZE_MAP[this.size]) !== null && _b !== void 0 ? _b : 24;
         const fontSize = (_c = FONT_SIZE_MAP[this.size]) !== null && _c !== void 0 ? _c : 'var(--co-font-size-18)';
         const showImage = this.type === 'image' && this.src && !this.imgFailed;
-        return (h("div", { key: '0cb2791e742ef38fdf9fe39037cb4024bf87df4f', class: {
+        const ariaLabel = this.type === 'text'
+            ? this.text
+            : this.type === 'image'
+                ? (_e = (_d = this.alt) !== null && _d !== void 0 ? _d : this.text) !== null && _e !== void 0 ? _e : this.icon
+                : this.icon;
+        return (h("div", { key: '279ce6f51cbc3b2c11c0660f5a0f98e03a2db4fb', class: {
                 'co-avatar': true,
                 [`co-avatar--${this.size}`]: true,
                 [`co-avatar--${this.type}`]: true,
@@ -45,7 +50,7 @@ export class CoAvatar {
                 'co-avatar--light': !!this.color && isLightColor(this.color),
             }, style: Object.assign(Object.assign({ width: `var(--co-avatar-size, ${dim}px)`, height: `var(--co-avatar-size, ${dim}px)`, fontSize }, (this.color ? { background: this.color } : {})), (this.ringColor
                 ? { '--co-avatar-border-color': this.ringColor, '--co-avatar-border-width': '2px' }
-                : {})), part: "avatar", role: "img", "aria-label": this.type === 'text' ? this.text : this.icon }, showImage ? (h("img", { class: "co-avatar__img", src: this.src, alt: this.text || '', onError: this.handleImgError })) : this.type === 'icon' ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
+                : {})), part: "avatar", role: "img", "aria-label": ariaLabel }, showImage ? (h("img", { class: "co-avatar__img", src: this.src, alt: (_g = (_f = this.alt) !== null && _f !== void 0 ? _f : this.text) !== null && _g !== void 0 ? _g : '', onError: this.handleImgError })) : this.type === 'icon' ? (h("co-icon", { name: this.icon, weight: this.iconWeight, size: iconSize })) : (h("span", { class: "co-avatar__text" }, this.text))));
     }
     static get is() { return "co-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -139,6 +144,25 @@ export class CoAvatar {
                 "reflect": false,
                 "attribute": "src"
             },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image (type=\"image\"); falls back to text when unset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,

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

@@ -10,7 +10,7 @@ export class CoBadge {
         this.color = 'default';
     }
     render() {
-        return (h("span", { key: '89a5de192302652fe4b9c41175c9ed38de22549b', class: {
+        return (h("span", { key: '17fe27e556bbcf5773feb6faf07533c01cc6f62e', class: {
                 'co-badge': true,
                 [`co-badge--${this.size}`]: true,
                 [`co-badge--${this.color}`]: true,

package/dist/collection/components/co-bottom-sheet/co-bottom-sheet.js

@@ -255,13 +255,13 @@ export class CoBottomSheet {
         (_a = this.bodyEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchmove', this.touchBlocker);
     }
     render() {
-        return (h("div", { key: '5a012ab0bd3939ed3266ba823d3d88949f6dbedc', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '4ce730ddf26b6d594b61d53553a3ebca14ed4c5e', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), 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) }, h("div", { key: 'a654a44b53c0f9647324c2c587e1e47277a1cd3d', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '71918dcc9b8ca914fa020cf2428671a2e747103d', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '57040104cd32072ef0b81dbdb22e3475b94cf64d', class: {
+        return (h("div", { key: 'e97aa389e60d44d412094c26854b788576426be1', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '03f77f9cd1f73a30264b98f42ad14aff228f58e9', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: '794c4506fb1cdb0d8229c6ec28171843ab009f22', class: { 'co-bottom-sheet': true, 'co-bottom-sheet--open': this.open }, part: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'co-bottom-sheet-heading' : undefined, style: { '--co-bottom-sheet-max-height': this.maxHeight }, onTransitionEnd: this.handleTransitionEnd, ref: (el) => (this.sheetEl = el) }, h("div", { key: 'a594d01c6c42a2829d81d8b4953bdb016b342cae', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: 'e7f768591e1a80b483b5312ea322184aacccbabf', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: '8bc0a823bef53438baabfa96465c762533d3c865', class: {
                 'co-bottom-sheet__header': true,
                 'co-bottom-sheet__header--show': this.hasHeaderSlot || !!this.heading,
-            }, part: "header" }, h("slot", { key: '1ebe3576caee4e503930b8f042ae4ef57063427c', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '7b5a81b9a833d7a0d00a07b8de7830b7e263d688', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), 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) }, h("slot", { key: 'b616b4a2fb6ea8634c4bb9889f9a3f1133bb863f' })), h("footer", { key: 'e4b192198526c78e2cd015bf116159c359a43292', class: {
+            }, part: "header" }, h("slot", { key: 'fff2367303fee3c26d3a73e48ca3b6655ce44414', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: '6d3947f80b56a798f2aaf454333c333a0d3b4106', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: 'c121e082e757c7ede9e79fabc704f7077652fbe2', class: "co-bottom-sheet__body", part: "body", onPointerDown: this.handleBodyPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, ref: (el) => (this.bodyEl = el) }, h("slot", { key: '895b3cda6d949853eff766133404c24039b4cb40' })), h("footer", { key: '24f5fa83ddada45deef4f49e55e3f330928b02f1', class: {
                 'co-bottom-sheet__footer': true,
                 'co-bottom-sheet__footer--show': this.hasFooter,
-            }, part: "footer" }, h("slot", { key: 'f461a3a9b895581d849f490f9769f280eeb2ce2b', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, part: "footer" }, h("slot", { key: 'e4a74380717a71b454af249e9ed732d8bbc8eabb', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
     }
     static get is() { return "co-bottom-sheet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-breadcrumb/co-breadcrumb.css

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs, 4px);
+  min-width: 0;
+}

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

@@ -0,0 +1,111 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Horizontal breadcrumb trail. Accepts `co-breadcrumb-item` children via the
+ * default slot, or auto-renders them from the `items` JSON prop.
+ *
+ * The separator between crumbs is drawn by each `co-breadcrumb-item` as a
+ * leading icon (hidden on the first crumb via CSS), so no separator markup is
+ * interleaved here. This component propagates its `separator` prop down to the
+ * slotted items and layouts them in a `align-items:center; gap:4px` flex row.
+ */
+export class CoBreadcrumb {
+    constructor() {
+        /** Icon name (Phosphor) for the separator between crumbs. Propagated to
+         *  slotted `co-breadcrumb-item` children. */
+        this.separator = 'caret-right';
+        this.handleSlotChange = () => this.propagateSeparator();
+    }
+    watchSeparator() {
+        this.propagateSeparator();
+    }
+    componentDidLoad() {
+        this.propagateSeparator();
+    }
+    /** Push the current `separator` onto every slotted (light-DOM) crumb. Items
+     *  auto-rendered from `items` get it directly in render() instead. */
+    propagateSeparator() {
+        const nodes = this.el.querySelectorAll('co-breadcrumb-item');
+        nodes.forEach((n) => {
+            n.separator = this.separator;
+        });
+    }
+    parseItems() {
+        if (!this.items)
+            return null;
+        try {
+            const parsed = JSON.parse(this.items);
+            return Array.isArray(parsed) ? parsed : null;
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    render() {
+        const data = this.parseItems();
+        return (h(Host, { key: '904d5f190213ccaeff86950071a170b52c548ceb', part: "breadcrumb", role: "navigation", "aria-label": "Breadcrumb" }, data
+            ? data.map((it, i) => (h("co-breadcrumb-item", { key: i, label: it.label, value: it.value, icon: it.icon, separator: this.separator, current: i === data.length - 1 })))
+            : h("slot", { onSlotchange: this.handleSlotChange })));
+    }
+    static get is() { return "co-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name (Phosphor) for the separator between crumbs. Propagated to\nslotted `co-breadcrumb-item` children."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'caret-right'"
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional JSON array to auto-render crumbs instead of using the slot, e.g.\n`[{ \"label\": \"Mi unidad\", \"icon\": \"cloud\", \"value\": \"root\" }]`. The last\nentry is marked `current`. When set, slotted children are ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "separator",
+                "methodName": "watchSeparator"
+            }];
+    }
+}

package/dist/collection/components/co-breadcrumb-item/co-breadcrumb-item.css

@@ -0,0 +1,66 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* Leading separator — caret-right size 13, gray-400 (NOT gray-500). The 4px on
+   its left comes from the parent co-breadcrumb's gap; margin-right adds the
+   matching 4px on its right so the separator sits symmetrically between crumbs. */
+.co-breadcrumb-item__sep {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: var(--co-spacing-xs, 4px);
+  color: var(--co-color-gray-400, #a0a0a0);
+}
+
+/* The first crumb has no leading separator. `:first-child` matches the first
+   element child both when slotted (light DOM child of co-breadcrumb) and when
+   auto-rendered from the `items` prop (shadow child of co-breadcrumb). */
+:host(:first-child) .co-breadcrumb-item__sep {
+  display: none;
+}
+
+/* Clickable crumb. No padding, no radius, no hover background. */
+.co-breadcrumb-item__content {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14, 14px);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body, -0.03em);
+  color: var(--co-color-gray-500, #888888);
+}
+
+.co-breadcrumb-item__content:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul, #2563eb));
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Current (last) crumb — medium weight + text-default ink. */
+.co-breadcrumb-item--current .co-breadcrumb-item__content {
+  font-weight: 500;
+  color: var(--co-color-base-negro, #1f1c1b);
+}
+
+.co-breadcrumb-item__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  /* Inherits the crumb color (gray-500 / negro) via currentColor. */
+}
+
+.co-breadcrumb-item__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/collection/components/co-breadcrumb-item/co-breadcrumb-item.js

@@ -0,0 +1,169 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single navigable crumb inside a `co-breadcrumb`.
+ *
+ * Renders a leading separator icon (hidden on the first crumb via CSS
+ * `:host(:first-child)`) followed by the clickable content — an optional
+ * leading icon and the label. Clicking (or Enter/Space) emits `coSelect` with
+ * the crumb's `value` (falling back to its `label`).
+ *
+ * Conventions mirror `co-menu-item`: the `current` crumb paints medium weight +
+ * text-default ink; earlier crumbs are regular weight + muted (gray-500).
+ */
+export class CoBreadcrumbItem {
+    constructor() {
+        /** Marks this crumb as the current (last) page — medium weight + text-default ink. */
+        this.current = false;
+        /** Leading separator icon (size 13, gray-400). Hidden on the first crumb via
+         *  CSS. Set by the parent `co-breadcrumb`; defaults to `caret-right`. */
+        this.separator = 'caret-right';
+        this.emit = () => {
+            this.coSelect.emit(this.value || this.label || '');
+        };
+        this.handleClick = () => this.emit();
+        this.handleKeydown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.emit();
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: 'd788ec16332a691710015ad2be2577388fe2f556', part: "breadcrumb-item", class: {
+                'co-breadcrumb-item': true,
+                'co-breadcrumb-item--current': this.current,
+            } }, h("span", { key: '8ce859164b523684d7480a3defc645a5153a2915', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '5cce7777df74e3e7a8e2f3dc7ac585eef7ffce58', name: this.separator, size: 13 })), h("span", { key: '3d707d53b84100b66eaf31bef278865d9bb36fd5', class: "co-breadcrumb-item__content", part: "content", role: "link", tabindex: "0", "aria-current": this.current ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && (h("span", { key: 'd5f033e2036771dd35ce14c2c30533e9ad27111b', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'dce9a4c62fa71a6cb00eb5110c8145ca8d940398', name: this.icon, size: 16 }))), h("span", { key: '1d0d750e03729165dddd5fbbb624e3ccdbf4f446', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '50fdfd367f71edfdcd3e3943e14fb35dbecb170f' })))));
+    }
+    static get is() { return "co-breadcrumb-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-breadcrumb-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-breadcrumb-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown in the crumb."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value emitted by `coSelect`. Falls back to `label` when unset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional leading icon (Phosphor name), size 16, inherits the crumb color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks this crumb as the current (last) page \u2014 medium weight + text-default ink."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current",
+                "defaultValue": "false"
+            },
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Leading separator icon (size 13, gray-400). Hidden on the first crumb via\nCSS. Set by the parent `co-breadcrumb`; defaults to `caret-right`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'caret-right'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coSelect",
+                "name": "coSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on click / Enter / Space with `value || label`. Bubbles + composed so\nconsumers can listen on the parent `co-breadcrumb`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/co-button/co-button.css

@@ -133,6 +133,29 @@
   opacity: 0.88;
 }
 
+/* ─── ELEVATED · secondary → white raised button ─────────────────
+   Opt-in via elevated + variant="secondary": shadow-sm resting lift
+   plus an inset hairline so it reads on a white surface. */
+.co-button--secondary.co-button--elevated {
+  box-shadow: var(--co-shadow-sm, 0 1px 2px 0 rgba(26, 26, 26, 0.04)),
+    inset 0 0 0 1px var(--co-color-opacity-negro-8);
+}
+
+/* ─── ON-DARK SURFACE · ghost/stroke ─────────────────────────────
+   surface="dark": for buttons placed on a dark bar (e.g. a selection
+   bar). White ink/icon + a blanco-16 hover wash. Higher specificity
+   than the default variant + :hover rules above, so it wins. */
+.co-button--ghost.co-button--surface-dark,
+.co-button--stroke.co-button--surface-dark {
+  color: var(--co-color-base-blanco, #fff);
+}
+.co-button--ghost.co-button--surface-dark:hover:not(:disabled),
+.co-button--stroke.co-button--surface-dark:hover:not(:disabled) {
+  background: var(--co-color-opacity-blanco-16);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 /* ─── ICON SLOTS ─────────────────────────────────────────────── */
 ::slotted([slot="icon-left"]),
 ::slotted([slot="icon-right"]) {

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

@@ -11,6 +11,10 @@ export class CoButton {
         this.shape = 'rounded';
         /** Size */
         this.size = 'm';
+        /** Raised elevation — with variant="secondary" renders a white raised button (shadow-sm + inset hairline). */
+        this.elevated = false;
+        /** Surface the button sits on. On "dark", ghost/stroke variants switch to white ink + blanco-16 hover. */
+        this.surface = 'light';
         /** Disabled state */
         this.disabled = false;
         /** Icon weight applied to both iconLeft and iconRight */
@@ -42,15 +46,17 @@ export class CoButton {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: '05a61f0d95bb3c6e09207bb643545694c40b0976', class: {
+        return (h("button", { key: '4a821dbbf2e1bc8e56343c64d8c4a4b46831c691', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
                 [`co-button--${this.size}`]: true,
+                [`co-button--surface-${this.surface}`]: true,
+                'co-button--elevated': this.elevated,
                 'co-button--disabled': this.disabled,
             }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: '9ebae938e533d11c31899023bf35c8e071dabc6e' }, this.label), this.iconRight
+            : null, h("slot", { key: '386309fa7ba9624ac2fbeed888ca84db0a74f57a' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -128,6 +134,46 @@ export class CoButton {
                 "attribute": "size",
                 "defaultValue": "'m'"
             },
+            "elevated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Raised elevation \u2014 with variant=\"secondary\" renders a white raised button (shadow-sm + inset hairline)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "elevated",
+                "defaultValue": "false"
+            },
+            "surface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Surface the button sits on. On \"dark\", ghost/stroke variants switch to white ink + blanco-16 hover."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "surface",
+                "defaultValue": "'light'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/co-button-group/co-button-group.js

@@ -10,12 +10,12 @@ export class CoButtonGroup {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: 'd95d8e7435cdef2385751f66442871f0f3bfea3b', class: {
+        return (h("div", { key: 'aaf009acd7eff27fb1b50ac4356c1686b1fc3a3d', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: 'd7e6aab7a87a34c080d922dca30b1e3d00e0a7b2' })));
+            }, role: "group" }, h("slot", { key: 'fd7468a9a12794ca8f88a4a9eba2eedb2cee1583' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -363,7 +363,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '7320bd2eb0ee092cf3499bd1d40d05cceb26a32f', class: "co-calendar", part: "root" }, h("div", { key: '1271d1d9a335b8d8a5bf206351e5b00a8e2f0528', class: "co-calendar__header", part: "header" }, h("button", { key: '456e7a68d6a910c8495e5cf7eeabd7fe13dce120', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '84eefee59bfec282afd4e4ec66b5c73f1a96ee7f', name: "caret-left", size: 16 })), h("button", { key: 'bd214b4dc78e77bed5038bf6e9ce44f401857518', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'fb3eec407771f96375dfd6451065e20f627c3516', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '6063b0cbb2f4bef653e25b1087f43c8a9141dbac', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: '24d805b7ba812a0b3f33e58714e0378ca7c03944', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+        return (h("div", { key: '7530e8888dab664df8e06d32941e274d843ce55d', class: "co-calendar", part: "root" }, h("div", { key: '6cac1b515387a43bd0cacbd825d30880c0966571', class: "co-calendar__header", part: "header" }, h("button", { key: '2f379184aa0b5fafa87f1cf93bea26d4e3bc8506', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '912670c171922fcd7b7c421f92f097192b397dd0', name: "caret-left", size: 16 })), h("button", { key: '2cda2492da31d641cabe5239f8433aaa6eb1b62b', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: '7375f4f9a2a76ed885e70f47bd0b99375b62cd61', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '927c0cfef9cd230eb2b2fb308cb1c9b3485232eb', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'c291b50461545f7e06e7eda52bcc1890b48ec2cd', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     static get is() { return "co-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,7 +200,7 @@ export class CoCalendarMonth {
         const short = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
         const long = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
         const today = todayYMD();
-        return (h("div", { key: '24b0039f30c4d4e043c83a6c77caf55098d6207c', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: '29357a95920cf7e5f8ab3673f19c0872d3fb50ad', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
+        return (h("div", { key: '5e1309a20594ee3ceb749d95a5e4d56340f01b49', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: '9d53a3162e162f1dcd47e9631d2d9220bd99b98d', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
             var _a;
             return (h("div", { class: "cal-month__week", role: "row" }, h("div", { class: "cal-month__days" }, week.map((date) => {
                 const ymd = parseISO(date);

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

@@ -29,13 +29,13 @@ export class CoCard {
         return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: 'cdebab62b3278f12ec11a48fc021f2b3581a26a9', class: {
+        return (h("div", { key: '72fa397d05359dbe75a84117cd328518e4c885b5', class: {
                 'co-card': true,
                 [`co-card--${this.variant}`]: true,
                 [`co-card--pad-${this.padding}`]: true,
                 'co-card--clickable': this.clickable,
                 'co-card--stretch': this.stretch,
-            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: '5617eec250a9bf610ff946eea91a9ce3a9779407', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '62cc9bec88df0e538667425958addb114631a3a0', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '2f47b30bece89900cf402bf4bfa6e8bc81a6a331', class: "co-card__body", part: "body" }, h("slot", { key: '252cd909fb7f094b7b806716b8e009858a1dd2c8' })), h("div", { key: 'aa2839cdf55f763bae3bd7fd61854ea0d513e9fa', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '0426f1e66c67a7b33789889a1daaea13f85969cc', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: 'efb224124fed52da7033a9475d54a34413be7859', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '01a8316c7907504bb993e1b390296df915c23061', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'cc897cc225043eeabe37446b58ede6dc457dd110', class: "co-card__body", part: "body" }, h("slot", { key: '5ccece1199f62bec0eeb1d5facc585ea0e4a5a24' })), h("div", { key: '235025fb89b8b62e740c11b9decf47db36289636', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '4546f4d4e9947abfd3b10164ea86da7b96490130', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     static get is() { return "co-card"; }
     static get encapsulation() { return "shadow"; }