@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js

@@ -1,4 +1,5 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
+import { normalizeText } from "../../utils/normalizeText";
 /** Default icon mapping for common Prolibu model keys → Phosphor icon names */
 const DEFAULT_ICON_MAP = {
     // Directory
@@ -128,6 +129,36 @@ const DEFAULT_ICON_MAP = {
     TourStudio: 'cube',
     Docs: 'file-text',
     Setup: 'gear-six',
+    // Human Resources
+    Recruitment: 'user-plus',
+    Candidates: 'user-list',
+    // Achievements / Recognition
+    Recognition: 'hands-clapping',
+    Achievements: 'trophy',
+    Rewards: 'gift',
+    Badges: 'medal',
+    BadgeNominations: 'star',
+    Prizes: 'trophy',
+    RewardsBudgets: 'wallet',
+    RedeemedPrizes: 'crown',
+    // Sales / Billing extras
+    PaymentReceipts: 'hand-coins',
+    Coupons: 'seal-percent',
+    // Integrations
+    Integrations: 'plugs-connected',
+    Mcp: 'plug',
+    LifecycleHooks: 'arrows-clockwise',
+    PaymentProviders: 'credit-card',
+    Stripe: 'credit-card',
+    ThirdParty: 'plugs-connected',
+    Sendgrid: 'paper-plane-tilt',
+    Apollo: 'rocket-launch',
+    Kaspr: 'identification-card',
+    OpenAi: 'robot',
+    Ultramsg: 'whatsapp-logo',
+    Slack: 'slack-logo',
+    Telegram: 'telegram-logo',
+    Discord: 'discord-logo',
 };
 /**
  * A complete sidebar navigation component that renders a hierarchical menu.
@@ -246,12 +277,12 @@ export class CoSidebarNav {
     get filteredItems() {
         if (!this.searchText)
             return this.parsedItems;
-        return this.filterRecursive(this.parsedItems, this.searchText.toLowerCase());
+        return this.filterRecursive(this.parsedItems, normalizeText(this.searchText));
     }
     filterRecursive(items, query) {
         const result = [];
         for (const item of items) {
-            const label = this.getLabel(item.key).toLowerCase();
+            const label = normalizeText(this.getLabel(item.key));
             if (label.includes(query)) {
                 result.push(item);
             }
@@ -364,10 +395,18 @@ export class CoSidebarNav {
     }
     renderLeafItem(item, forceLabel = false) {
         const isActive = item.key === this.activeKey;
-        return (h("button", { class: {
+        const label = this.getLabel(item.key);
+        const showLabel = this.mode === 'full' || forceLabel;
+        const button = (h("button", { class: {
                 'co-sidebar-nav__item': true,
                 'co-sidebar-nav__item--active': isActive,
-            }, onClick: () => this.handleLeafClick(item), title: this.getLabel(item.key) }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item)), (this.mode === 'full' || forceLabel) && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
+            }, onClick: () => this.handleLeafClick(item), "aria-label": showLabel ? undefined : label }, h("span", { class: "co-sidebar-nav__item-icon" }, this.renderIcon(item)), showLabel && (h("span", { class: "co-sidebar-nav__item-label" }, this.renderHighlightedLabel(item.key)))));
+        // Collapsed (icon-only) items get a Cobalt tooltip with the label instead of
+        // the native `title`. Flyout items (forceLabel) already show their label.
+        if (this.mode === 'min' && !forceLabel) {
+            return (h("co-tooltip", { content: label, placement: "right", offset: 12 }, button));
+        }
+        return button;
     }
     openFlyout(key, anchorEl, childCount = 0) {
         clearTimeout(this.flyoutTimeout);
@@ -421,8 +460,10 @@ export class CoSidebarNav {
     }
     renderCategory(item) {
         if (this.mode === 'min') {
-            // In mini mode, render children directly (skip category headers)
-            return item.children.map(child => this.renderItem(child));
+            // In mini mode, drop the category label but keep a group wrapper so the
+            // sections stay visually separated by vertical spacing (mirrors the
+            // section gaps of full mode — the structure is still legible collapsed).
+            return (h("div", { class: "co-sidebar-nav__category--min" }, item.children.map(child => this.renderItem(child))));
         }
         return (h("div", { class: "co-sidebar-nav__category" }, h("span", { class: "co-sidebar-nav__category-label" }, this.renderHighlightedLabel(item.key)), h("div", { class: "co-sidebar-nav__category-items" }, item.children.map(child => this.renderItem(child)))));
     }
@@ -439,10 +480,14 @@ export class CoSidebarNav {
     }
     render() {
         const items = this.filteredItems;
-        return (h("nav", { key: '8734e55fec1337ceb95e2958c1b7b4574b74e37e', class: {
+        return (
+        // `flyout-open` (min mode only) lets the CSS drop the host edge-fade mask
+        // while a flyout is shown — a host mask would otherwise clip AND
+        // mis-position the fixed flyout (mask makes the host a containing block).
+        h(Host, { key: 'b24ca79d961f65bbe629e0289185de1751ab1fd1', class: { 'flyout-open': !!this.flyoutKey } }, h("nav", { key: 'e37ad68826bf9236c9a009a8b4355dfaca2d3a3d', class: {
                 'co-sidebar-nav': true,
                 'co-sidebar-nav--min': this.mode === 'min',
-            } }, this.renderSearch(), h("div", { key: 'f7df980d36941cb411725d546df417be8172419d', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item)))));
+            } }, this.renderSearch(), h("div", { key: 'ccf9c947e0fa3f4494ebd9fa55e2c726836e8c59', class: "co-sidebar-nav__items" }, items.map(item => this.renderItem(item))))));
     }
     static get is() { return "co-sidebar-nav"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+}
+
+.co-skeleton {
+  height: 1em;
+  border-radius: var(--co-border-radius-xs);
+  background: linear-gradient(
+    90deg,
+    var(--co-semantic-surface-secondary) 0%,
+    var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%,
+    var(--co-semantic-surface-secondary) 100%
+  );
+  background-size: 200% 100%;
+  animation: co-skeleton-sweep 1.2s ease-in-out infinite;
+}
+
+.co-skeleton--text { border-radius: var(--co-border-radius-xxs); }
+.co-skeleton--circle { border-radius: var(--co-border-radius-full); }
+
+@keyframes co-skeleton-sweep {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .co-skeleton { animation: none; }
+}

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

@@ -0,0 +1,97 @@
+import { h } from "@stencil/core";
+/**
+ * Placeholder de carga con shimmer (sweep). Componer apilando varios.
+ * Respeta prefers-reduced-motion (sin animación).
+ */
+export class CoSkeleton {
+    constructor() {
+        /** rect (default) | text (radio menor) | circle */
+        this.variant = 'rect';
+        /** Ancho CSS (default 100%) */
+        this.width = '100%';
+        /** Alto CSS (default por variante en CSS) */
+        this.height = '';
+    }
+    render() {
+        const style = { width: this.width };
+        if (this.height)
+            style.height = this.height;
+        return (h("div", { key: '073c65d588917203f4f6a253a97535dc8a1a38f7', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
+    }
+    static get is() { return "co-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rect' | 'text' | 'circle'",
+                    "resolved": "\"circle\" | \"rect\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "rect (default) | text (radio menor) | circle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'rect'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ancho CSS (default 100%)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alto CSS (default por variante en CSS)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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

@@ -72,12 +72,12 @@ export class CoSlider {
     }
     render() {
         const pct = this.percentage;
-        return (h("div", { key: '55b6b1234eb1262d34100dbeeea5b9cdd00cf9b0', class: {
+        return (h("div", { key: '719f3ecd1e92b234f2938b570747c4d1f174903b', class: {
                 'co-slider': true,
                 'co-slider--disabled': this.disabled,
                 'co-slider--dragging': this.dragging,
                 [`co-slider--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: '9b552dbf32b1a5d63b8c068bace8ed6f976cfc06', class: "co-slider__labels" }, h("div", { key: '84ef18f271167714c4fb0f0a493347aed826677f', class: "co-slider__labels-left" }, this.label && h("label", { key: '83f55dab8b5c9f6ffe645bf5a9a5f64d48091cdc', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: 'e87460cb0301217c620534169a81a4d1eb2ec8e8', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'fcceffe989b3a920bf0a036a84945ae09d12e332', class: "co-slider__value" }, this.value))), h("div", { key: '3bb4838439376d74c46a48ffd44924243f0c8d1f', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: '452336835c5ec68ade4b5d62c7bf6f1228033dd3', class: "co-slider__track" }, h("div", { key: 'eace119e23a4ffa2e775af4b7df2fdae2a4c1a4d', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: '2961e33a63c54bcd6642d3d9e49c7816bdcc0136', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: '1d3796eecca1054817db1b2d4dbb4b79199b59f6', class: "co-slider__marks" }, h("span", { key: '37a8f0927a98dc4564d18bc3ac6069778d28db43', class: "co-slider__mark" }, this.min), h("span", { key: 'c250e0d1e046d854a142fd54145d6839d35455e4', class: "co-slider__mark" }, this.max))), h("input", { key: '56be78722e738311ddd15fe107231c93d63a961b', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '4d620cd43d5a58f188f3836362e9f258455ef277', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'b3f449dd2e7d7df70f9164e547f2ee91a1ee7c87', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: 'b73792b9bf9e957ece4ad05a9e32b40ffa221867', class: "co-slider__helper-text" }, this.helperText)))));
+            } }, (this.label || this.secondaryLabel || this.showValue) && (h("div", { key: 'fb46d7ebad65bf172b4c816b733e08ca991e5cb8', class: "co-slider__labels" }, h("div", { key: '21718e63d1d63f802f939c10f962f0e9ec5b56e6', class: "co-slider__labels-left" }, this.label && h("label", { key: 'd408bc63492d3b778f7314d1e66864eb1ad6edce', class: "co-slider__label" }, this.label), this.secondaryLabel && h("span", { key: '3e439468743dfcc0ff315bf388a074cdc4627f2d', class: "co-slider__secondary-label" }, this.secondaryLabel)), this.showValue && h("span", { key: 'a4e1faacfc462132454f6c5e3763d4fb19f68c64', class: "co-slider__value" }, this.value))), h("div", { key: 'eb56a12853ed3646a410a5514758d4fd518a8122', class: "co-slider__track-wrapper", ref: el => (this.trackEl = el), onPointerDown: this.handlePointerDown }, h("div", { key: 'a1b207d80af7febbc40cd99bc9dac1dd67704b50', class: "co-slider__track" }, h("div", { key: '77df50269d88735f61d8f18e05261fa74f89095f', class: "co-slider__fill", style: { width: `${pct}%` } })), h("div", { key: 'c162883c5bd5c162b42a4ab2d8ef305bec6e122f', class: "co-slider__thumb", style: { left: `${pct}%` } })), this.showMarks && (h("div", { key: 'c54273d0f17b2417603969d96c15218f450034b1', class: "co-slider__marks" }, h("span", { key: '8c79656db7ef7c5da77bfb4195e94f2b75cb17e6', class: "co-slider__mark" }, this.min), h("span", { key: 'f5b3a63ebd5ca13b4a5f3275f2084addb73a7f4e', class: "co-slider__mark" }, this.max))), h("input", { key: '415197b6ae17a3ca980171019d419939a5b3ae6c', class: "co-slider__native", type: "range", min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, onInput: this.handleInputChange, "aria-label": this.label || 'Slider' }), this.helperText && (h("div", { key: '935c2f02e24345bade1563782c3a252157eecd00', class: `co-slider__helper co-slider__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: '76f5ccf6375c362841726f24c4be222293bd14b3', name: this.statusIcon, size: 14, weight: "fill", class: "co-slider__helper-icon" }), h("span", { key: '909c3b06b4eecd507b595d31b78220c7c29fbf22', class: "co-slider__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,6 +72,7 @@
 }
 
 .co-switch-wrapper__helper-text {
+  color: var(--co-semantic-text-muted);
   font-size: var(--co-font-size-14);
   font-weight: 400;
   line-height: 1;
@@ -117,7 +118,11 @@
 
 /* ─── TRACK COLORS ──────────────────────────────────────────── */
 .co-switch--on  { background: var(--co-semantic-surface-primary); }
-.co-switch--off { background: var(--co-semantic-surface-muted); }
+.co-switch--off {
+  background: color-mix(in srgb, var(--co-semantic-surface-muted) 35%, 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));
+}
 
 /* ─── THUMB ─────────────────────────────────────────────────── */
 .co-switch__thumb {
@@ -141,3 +146,23 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+
+.co-field-required {
+  margin-left: 2px;
+  color: var(--co-color-status-error);
+}
+
+.co-field-required__caption {
+  margin-left: 4px;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+}
+
+.co-field-required__caption::before {
+  content: var(--co-field-required-text, ' (required)');
+}
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-switch--off { background: var(--co-semantic-surface-muted); }
+}

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

@@ -1,10 +1,13 @@
 import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
 export class CoSwitch {
     constructor() {
         /** Whether the switch is on */
         this.checked = false;
         /** Disabled state */
         this.disabled = false;
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
         /** Validation status */
         this.status = 'default';
         this.handleClick = () => {
@@ -25,17 +28,17 @@ export class CoSwitch {
     }
     render() {
         const hasLabels = this.label || this.secondaryLabel;
-        const hasHelper = this.helperText && this.status !== 'default';
-        return (h("div", { key: 'dee7b24ea46fe9ea743b408b1c4b79247c98cb28', class: {
+        const hasHelper = !!this.helperText;
+        return (h("div", { key: '2a60b60256d74e480b243ddb3901e5e8e86c90dd', class: {
                 'co-switch-wrapper': true,
                 'co-switch-wrapper--disabled': this.disabled,
                 [`co-switch-wrapper--${this.status}`]: this.status !== 'default',
-            } }, h("div", { key: 'fcc76c8c5ffca4f004cd1fae898219fe533e7da1', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '06dee0e71ec4bbcf5b9e7d9113e312b72d40059a', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
+            } }, h("div", { key: '57826bc0de97ccb8358f544f11a25c2b7000bbb8', class: "co-switch-wrapper__row", onClick: this.handleClick }, h("button", { key: '5ccd4d33fde509bd9139a5e453c93991dda1f558', role: "switch", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
                 'co-switch': true,
                 'co-switch--on': this.checked,
                 'co-switch--off': !this.checked,
                 'co-switch--disabled': this.disabled,
-            }, disabled: this.disabled, part: "track" }, h("span", { key: '744f64362f83b748fb93563ae0fe3192af4b8d15', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '22600658649934117f8db48addf7f954e3e1c025', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: '669eec2e75eccba646d084a0d824aee19ad6cb07', class: "co-switch-wrapper__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '9f4152a495493daf3718a923c87bab53be59821c', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '2971255ce480786effc0330de7e3bd07f9b27c4f', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: '0f10ba6fb3e34a893b18ccaf72097226d860a36e', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: '4fdfe7567d891028154d3d9d421da8a1cbf9b397', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
+            }, disabled: this.disabled, part: "track" }, h("span", { key: 'f530dcbf59372906efe0b45048cd5d60b139e9bc', class: "co-switch__thumb", part: "thumb" })), hasLabels && (h("div", { key: '24693a23c390a4a5e892f61998fc60a29ce9367f', class: "co-switch-wrapper__labels" }, this.label && h("span", { key: 'e1c8fc8d176e8f7af8e8cdab90671061e0e66ab7', class: "co-switch-wrapper__label", part: "label" }, this.label, h(RequiredMark, { key: 'bfc33a5e95f7e9fd0f9ca55ccd6c990515623e0e', required: this.required })), this.secondaryLabel && (h("span", { key: 'd4fe51103f9c13dee75e96b8ec8faa254fbedde3', class: "co-switch-wrapper__secondary-label", part: "secondary-label" }, this.secondaryLabel))))), hasHelper && (h("div", { key: '1b2d6c1124e2d0f448b9aa0ed019e75b75426949', class: `co-switch-wrapper__helper co-switch-wrapper__helper--${this.status}` }, this.statusIcon && (h("co-icon", { key: 'ae56e1f679f393f77bb3836dfd61dee093a8a461', name: this.statusIcon, size: 14, weight: "fill", class: "co-switch-wrapper__helper-icon" })), h("span", { key: 'd99621887a268b3b9b19361890c8582adbaa4482', class: "co-switch-wrapper__helper-text" }, this.helperText)))));
     }
     static get is() { return "co-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -110,6 +113,26 @@ export class CoSwitch {
                 "reflect": false,
                 "attribute": "label"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required (renders a required marker on the label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
             "secondaryLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -19,12 +19,12 @@ export class CoTab {
     }
     render() {
         const iconSize = this.size === 'large' ? 18 : 14;
-        return (h("button", { key: '863ea310122c3becbd20a895b7f831322d0b72fb', class: {
+        return (h("button", { key: 'f639c074e062b1d8f2cb0062cb617a53451ec78f', class: {
                 'co-tab': true,
                 [`co-tab--${this.size}`]: true,
                 'co-tab--selected': this.selected,
                 'co-tab--disabled': this.disabled,
-            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: '88c5335df71e746585ab770759d565b548b2a718', name: this.iconLeft, size: iconSize })), h("span", { key: '8b68515ebe754fae56d28af0d0261dd8ad1b3c73', class: "co-tab__label" }, this.label), this.iconRight && (h("co-icon", { key: '8e57b2c39643f0dd29d461c8d83574b8002806ae', name: this.iconRight, size: iconSize }))));
+            }, type: "button", role: "tab", "aria-selected": this.selected ? 'true' : 'false', disabled: this.disabled, part: "tab", onClick: this.handleClick }, this.iconLeft && (h("co-icon", { key: 'eaae38c6de14707c2b0a318f0afea16a3b5051f8', name: this.iconLeft, size: iconSize })), h("span", { key: '296bac2a9c7639b590065b6eba2730218fff3ba2', class: "co-tab__label" }, this.label), this.iconRight && (h("co-icon", { key: 'cf2c205989a2a172ab16482bfb510dbb0be86453', name: this.iconRight, size: iconSize }))));
     }
     static get is() { return "co-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class CoTabGroup {
         });
     }
     render() {
-        return (h("div", { key: 'fb43d323a8146aa707955f62cdb2fc4fedfea6a0', class: "co-tab-group", role: "tablist", part: "tab-group" }, h("slot", { key: '96e31ba1a9cf0e21763dff25de4750dfe147b479' })));
+        return (h("div", { key: '458524e7f1469d90c43bf9a8f34ee68d511e9d36', class: "co-tab-group", role: "tablist", part: "tab-group" }, h("slot", { key: 'f11af2be459cb51e9cd426d0e20839fd6d1477f8' })));
     }
     static get is() { return "co-tab-group"; }
     static get encapsulation() { return "shadow"; }