@prolibu-suite/cobalt-core 0.2.0 → 0.4.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

@@ -7,7 +7,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: none;
+  border: 1px solid transparent;
   outline: none;
   font-family: var(--co-font-family-primary);
   font-weight: 400;
@@ -17,25 +17,43 @@
   -webkit-font-smoothing: antialiased;
   transition: opacity 0.15s ease, background 0.15s ease;
   box-sizing: border-box;
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
 }
 
 /* ─── VARIANTS ─────────────────────────────────────────────── */
 .co-button--primary {
-  background: var(--co-semantic-surface-primary);
+  background: color-mix(in srgb, var(--co-semantic-surface-primary) 78%, transparent);
   color: var(--co-semantic-on-primary);
+  border-color: color-mix(in srgb, var(--co-semantic-on-primary) 28%, transparent);
 }
 .co-button--secondary {
-  background: var(--co-semantic-surface-secondary);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
   color: var(--co-semantic-on-secondary);
+  border-color: var(--co-semantic-border-subtle);
 }
 .co-button--stroke {
-  background: transparent;
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);
   color: var(--co-semantic-text-default);
-  border: 1px solid var(--co-semantic-border-default);
+  border-color: var(--co-semantic-border-default);
 }
 .co-button--ghost {
   background: transparent;
   color: var(--co-semantic-text-default);
+  border-color: transparent;
+  /* Ghost: no chrome, no frost until hover */
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+.co-button--danger {
+  background: var(--co-semantic-status-error);
+  color: var(--co-color-base-blanco);
+  border-color: transparent;
+}
+.co-button--success {
+  background: var(--co-semantic-status-success);
+  color: var(--co-color-base-blanco);
+  border-color: transparent;
 }
 
 /* ─── SIZES · ROUNDED (radius-full) ──────────────────────────
@@ -102,10 +120,41 @@
 }
 .co-button--primary:hover:not(:disabled) { opacity: 0.88; }
 .co-button--secondary:hover:not(:disabled),
-.co-button--stroke:hover:not(:disabled),
-.co-button--ghost:hover:not(:disabled) {
+.co-button--stroke:hover:not(:disabled) {
   background: var(--co-semantic-surface-hover);
 }
+.co-button--ghost:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--co-semantic-surface-hover) 60%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+}
+.co-button--danger:hover:not(:disabled),
+.co-button--success:hover:not(:disabled) {
+  opacity: 0.88;
+}
+
+/* ─── 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"]),
@@ -113,3 +162,10 @@
   display: inline-flex;
   flex-shrink: 0;
 }
+
+/* ─── FALLBACK: no backdrop-filter → solid, legible surfaces ──── */
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-button--primary { background: var(--co-semantic-surface-primary); }
+  .co-button--secondary { background: var(--co-semantic-surface-secondary); }
+  .co-button--stroke { background: transparent; }
+}

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 */
@@ -35,22 +39,24 @@ export class CoButton {
         };
     }
     render() {
-        var _a;
-        const iconSize = (_a = ICON_SIZE[this.size]) !== null && _a !== void 0 ? _a : 18;
+        var _a, _b;
+        const iconSize = (_b = (_a = this.iconSize) !== null && _a !== void 0 ? _a : ICON_SIZE[this.size]) !== null && _b !== void 0 ? _b : 18;
         const customStyle = {};
         if (this.color)
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: 'e4851bcf865f7588c2732939375d66764fcf43fe', class: {
+        return (h("button", { key: '4a821dbbf2e1bc8e56343c64d8c4a4b46831c691', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
                 [`co-button--${this.size}`]: true,
+                [`co-button--surface-${this.surface}`]: true,
+                'co-button--elevated': this.elevated,
                 'co-button--disabled': this.disabled,
             }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: '83c41e8362c71147f909e1e82fd199233dcf8892' }, this.label), this.iconRight
+            : null, h("slot", { key: '386309fa7ba9624ac2fbeed888ca84db0a74f57a' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -72,8 +78,8 @@ export class CoButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'stroke' | 'ghost'",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"stroke\"",
+                    "original": "'primary' | 'secondary' | 'stroke' | 'ghost' | 'danger' | 'success'",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\" | \"stroke\" | \"success\"",
                     "references": {}
                 },
                 "required": false,
@@ -104,7 +110,7 @@ export class CoButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "shape",
                 "defaultValue": "'rounded'"
             },
@@ -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,
@@ -282,6 +328,25 @@ export class CoButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "text-color"
+            },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the size-derived glyph px (e.g. 24). Falls back to the size default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
             }
         };
     }

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: '1cb2ae54992e103811c5e13d3b332fc2eb7d4d3f', class: {
+        return (h("div", { key: 'aaf009acd7eff27fb1b50ac4356c1686b1fc3a3d', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: '35b74774de7adec0eafdced70ff56a34575eb037' })));
+            }, role: "group" }, h("slot", { key: 'fd7468a9a12794ca8f88a4a9eba2eedb2cee1583' })));
     }
     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: '38278f3489400b035c01cfcdb5e5afbcc5000b21', class: "co-calendar", part: "root" }, h("div", { key: '0bcd5c42678b1057fb327853cacad03a8b49cdd1', class: "co-calendar__header", part: "header" }, h("button", { key: '6e7210ea64062171c0f94f463251e6373c01c348', 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: '053ff755d082dae52d5cce4b0338f795d56829b7', name: "caret-left", size: 16 })), h("button", { key: '70af310b739b910e850715ac626430c1a30e3479', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'b06bc1fb2aa4c8c31e53fa68eebade370d8026f9', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '0eee7bed8085c2d3fd495f8b4152b359c3e246ad', 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: 'ffc4ff19f0ba3e69cb6b04a2888bc2a093f090be', 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"; }