@prolibu-suite/cobalt-core 0.3.0 → 0.5.0

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-tT-aZV0-.js';
 
-const coAccordionCss = () => `:host{display:block}.co-accordion{display:flex;flex-direction:column;width:100%}.co-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;border:none;background:transparent;cursor:pointer;font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);text-align:left}.co-accordion__heading-group{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px)}.co-accordion__heading{font-size:var(--co-font-size-24);font-weight:500;line-height:1.25;letter-spacing:-0.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-accordion__subheading{font-size:var(--co-font-size-14);font-weight:400;line-height:1.3;letter-spacing:normal;color:var(--co-semantic-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-accordion__caret{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--co-semantic-text-default);transition:transform 0.2s ease;transform:rotate(180deg);}.co-accordion--open .co-accordion__caret{transform:rotate(0deg);}.co-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease}.co-accordion__body-inner{min-height:0;overflow:hidden;padding-top:var(--co-spacing-2xl);}.co-accordion--open .co-accordion__body{grid-template-rows:1fr}.co-accordion:not(.co-accordion--open) .co-accordion__body-inner{visibility:hidden;transition:visibility 0s linear 0.25s}.co-accordion--open .co-accordion__body-inner{visibility:visible;transition:visibility 0s linear 0s}.co-accordion__header:focus-visible{outline:2px solid var(--co-color-primary-azul, #2563eb);outline-offset:4px;border-radius:var(--co-border-radius-xs, 8px)}.co-accordion--disabled .co-accordion__header{opacity:0.5;cursor:not-allowed}`;
+const coAccordionCss = () => `:host{display:block}.co-accordion{display:flex;flex-direction:column;width:100%}.co-accordion__header{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm, 6px);width:100%;font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);text-align:left}.co-accordion__heading-group{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xxs, 2px)}.co-accordion__heading{font-size:var(--co-font-size-24);font-weight:500;line-height:1.25;letter-spacing:-0.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-accordion__subheading{font-size:var(--co-font-size-14);font-weight:400;line-height:1.3;letter-spacing:normal;color:var(--co-semantic-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-accordion__caret{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:transparent;border-radius:var(--co-border-radius-full, 9999px);color:var(--co-semantic-text-default);cursor:pointer;transition:transform 0.2s ease, background-color 0.15s ease;transform:rotate(180deg);}.co-accordion__caret:hover:not(:disabled){background:var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08))}.co-accordion--open .co-accordion__caret{transform:rotate(0deg);}.co-accordion__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.25s ease}.co-accordion__body-inner{min-height:0;overflow:hidden;padding-top:var(--co-spacing-2xl);}.co-accordion--open .co-accordion__body{grid-template-rows:1fr}.co-accordion:not(.co-accordion--open) .co-accordion__body-inner{visibility:hidden;transition:visibility 0s linear 0.25s}.co-accordion--open .co-accordion__body-inner{visibility:visible;transition:visibility 0s linear 0s}.co-accordion__caret:focus-visible{outline:2px solid var(--co-color-primary-azul, #2563eb);outline-offset:2px}.co-accordion--disabled .co-accordion__header{opacity:0.5}.co-accordion--disabled .co-accordion__caret{cursor:not-allowed}`;
 
 const CoAccordion = class {
     constructor(hostRef) {
@@ -34,11 +34,11 @@ const CoAccordion = class {
         return !!(this.subheading && this.subheading.trim()) || this.hasSubheadingSlot;
     }
     render() {
-        return (h("div", { key: '6ef26b2e6312391fcfc164f43dac68d63ba3af2d', class: {
+        return (h("div", { key: '4e2089349432ce39bb797397aacaebd022fcbcee', class: {
                 'co-accordion': true,
                 'co-accordion--open': this.open,
                 'co-accordion--disabled': this.disabled,
-            }, part: "accordion" }, h("button", { key: '0f094a6a90dacfd1a59de4f002dc6e1d2bde80c6', class: "co-accordion__header", type: "button", "aria-expanded": this.open ? 'true' : 'false', disabled: this.disabled, onClick: this.handleToggle, part: "header" }, h("span", { key: '406b3b06d8fa48df809652838f466bf8dae1b1d0', class: "co-accordion__heading-group" }, h("span", { key: '72d56aadb1f7b6cfe110121a5f3ce7690b7580a9', class: "co-accordion__heading", part: "heading" }, h("slot", { key: '25d921d62d196bd7bb20ed5a9a3cac3b96bb77fd', name: "header" }, this.heading)), this.showSubheading && (h("span", { key: '0b35302e165d304c61feaf616252f4be829b5b97', class: "co-accordion__subheading", part: "subheading" }, h("slot", { key: 'dfc194ec90f524edb9e65b150c3f920721126bfa', name: "subheading" }, this.subheading)))), h("span", { key: '6fb170bf34fb0be5ab9abb3c8c61f80076b02e4b', class: "co-accordion__caret", part: "caret" }, h("co-icon", { key: '0929dae22a07eec32c8919844fe3c29292e65cdb', name: "caret-up", size: 20 }))), h("div", { key: '783e6bc3ba9090dad9d972a88830fc059f442432', class: "co-accordion__body", part: "body" }, h("div", { key: '165c8cf24049cbec512542130f2e2b61b2c9e194', class: "co-accordion__body-inner", part: "body-inner" }, h("slot", { key: '0a50328db4f4b9ab900912c34a250f4c9b136f8f' })))));
+            }, part: "accordion" }, h("div", { key: '4337878858bd31822201a925010f3150568fa056', class: "co-accordion__header", part: "header" }, h("span", { key: 'cf69c69cc786981ca6bd54bd0f6a6c38a3baa0b6', class: "co-accordion__heading-group" }, h("span", { key: '0e7efd52e6d48c35ce0270485e8ce6099c6a3302', class: "co-accordion__heading", part: "heading" }, h("slot", { key: 'b575ce7ae5611007490724f430819f083781f84d', name: "header" }, this.heading)), this.showSubheading && (h("span", { key: '996a58f3f3b5cd656849b413b0f998675452cc2f', class: "co-accordion__subheading", part: "subheading" }, h("slot", { key: 'a9029aa67f51162ad54c010d23bf20545883ef45', name: "subheading" }, this.subheading)))), h("button", { key: '757286aaf2914fe7d32fc14ab0f5de57ffeab48c', class: "co-accordion__caret", type: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.heading || 'Toggle section', disabled: this.disabled, onClick: this.handleToggle, part: "caret" }, h("co-icon", { key: 'b4c3c96489a30607727a44955dbff2d504ef2b6e', name: "caret-up", size: 20 }))), h("div", { key: 'bd56b12cbd7484f61fec140740312800536d7b18', class: "co-accordion__body", part: "body" }, h("div", { key: '1f2ff56e7bd7a49f8484c988ecdf434d108ef4ed', class: "co-accordion__body-inner", part: "body-inner" }, h("slot", { key: '25ef25609ccece786a05709d90a32e7e135fec72' })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/co-app-shell.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CYsftTKf.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-tT-aZV0-.js';
 
 const coAppShellCss = () => `:host{display:flex;height:100vh;overflow:hidden;background:var(--co-app-shell-bg, linear-gradient(     180deg,     var(--co-color-base-off-white) 0%,     var(--co-color-neutral-100) 50%,     var(--co-color-neutral-100) 100%   ));font-family:var(--co-font-family-primary)}.sidebar{display:flex;flex-direction:column;width:256px;height:100%;flex-shrink:0;overflow:hidden;transition:width 0.2s ease;padding:var(--co-spacing-sm);padding-right:0;box-sizing:border-box}:host([sidebar-mode="min"]) .sidebar{--co-sidebar-min-width:64px;width:var(--co-sidebar-min-width);align-items:flex-start;padding:var(--co-spacing-sm) 0}.sidebar__header{flex-shrink:0}.sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.sidebar__body:hover{scrollbar-color:var(--co-color-opacity-blanco-16) transparent}.sidebar__body::-webkit-scrollbar{width:6px}.sidebar__body::-webkit-scrollbar-track{background:transparent}.sidebar__body::-webkit-scrollbar-thumb{background:transparent;border-radius:9999px}.sidebar__body:hover::-webkit-scrollbar-thumb{background:var(--co-color-opacity-blanco-16)}.sidebar__body:hover::-webkit-scrollbar-thumb:hover{background:var(--co-color-opacity-blanco-25)}.sidebar__body:hover::-webkit-scrollbar-thumb:active{background:var(--co-color-opacity-blanco-50)}.sidebar__footer{flex-shrink:0}:host([sidebar-mode="min"]) .sidebar__header,:host([sidebar-mode="min"]) .sidebar__body,:host([sidebar-mode="min"]) .sidebar__footer{display:flex;flex-direction:column;align-items:center;width:var(--co-sidebar-min-width, 64px)}:host([sidebar-mode="min"]) .sidebar__header{gap:var(--co-spacing-sm);padding-bottom:var(--co-spacing-md)}:host([sidebar-mode="min"]) .sidebar__body{scrollbar-width:none}:host([sidebar-mode="min"]) .sidebar__body::-webkit-scrollbar{width:0}.main{display:flex;flex-direction:column;flex:1;min-width:0;padding:0;margin:var(--co-spacing-sm);margin-left:0;min-height:0;filter:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06))     drop-shadow(0 10px 28px rgba(31, 28, 27, 0.12));--co-shell-r:var(--co-border-radius-md);--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>")}.main__card{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:0;-webkit-mask:var(--co-sq-tl) top left / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-tr) top right / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-shell-r) var(--co-shell-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-shell-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-shell-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-tr) top right / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-bl) bottom left / var(--co-shell-r) var(--co-shell-r) no-repeat,     var(--co-sq-br) bottom right / var(--co-shell-r) var(--co-shell-r) no-repeat,     linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-shell-r) + 2px) no-repeat,     linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-shell-r) + 2px) 100% no-repeat}.main__header{flex-shrink:0}.main__content{flex:1;min-height:0;overflow:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}.main__content:hover{scrollbar-color:var(--co-color-opacity-negro-16) transparent}.main__content::-webkit-scrollbar{width:6px;height:6px}.main__content::-webkit-scrollbar-track{background:transparent}.main__content::-webkit-scrollbar-thumb{background:transparent;border-radius:9999px}.main__content:hover::-webkit-scrollbar-thumb{background:var(--co-color-opacity-negro-16)}.main__content:hover::-webkit-scrollbar-thumb:hover{background:var(--co-color-opacity-negro-25)}.main__content:hover::-webkit-scrollbar-thumb:active{background:var(--co-color-opacity-negro-50)}.main__content--card{background:var(--co-semantic-surface-secondary)}`;
 
@@ -12,10 +12,10 @@ const CoAppShell = class {
         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: 'eba2c0de5107ee99f46dd0f58e93c7957b635fc6' }, h("aside", { key: 'd70fd877fb8b0341f1a93d0c96f7e94ccc67a5bc', class: "sidebar", part: "sidebar" }, h("div", { key: '712d562d0137d49073264464a4656efa13505080', class: "sidebar__header", part: "sidebar-header" }, h("slot", { key: '3414826e8939d2cd01f1fcdca7dadf1ec6c6921e', name: "sidebar-header" })), h("div", { key: '2f9ec77ce51b77048130c042a7c275b8f1169b68', class: "sidebar__body", part: "sidebar-body" }, h("slot", { key: '6291e33cce9afcfb59fac200629f899206d667eb', name: "sidebar" })), h("div", { key: 'e3314bda8652362d2570960a0ee65fb843d6e07f', class: "sidebar__footer", part: "sidebar-footer" }, h("slot", { key: 'e2b09d7a7435e0c29f3ac43b9a4200763964d52e', name: "sidebar-footer" }))), h("div", { key: '73081c14cf2f04ad4b0062007287edea09bb3a88', class: "main", part: "main" }, h("div", { key: '5e3dbe0b27716f815972ea39dda4479b2072872c', class: "main__card", part: "card" }, h("header", { key: '3df713d4c3a015ba14366433770cfba66e9b8bbc', class: "main__header", part: "header" }, h("slot", { key: '8e36000c6195f22fb7abe54d1adfb026374d9248', name: "navbar" })), h("main", { key: '63cda7e07239d551fb950e12cce998e2fe9271c7', class: {
                 'main__content': true,
                 'main__content--card': this.contentCard,
-            }, part: "content" }, h("slot", { key: '0f339d0bdfc1352551bc10c0ce3a54c4a757722e' }))))));
+            }, part: "content" }, h("slot", { key: '7ccab85592e8e9efdc2802f0147ad8b5ad749899' }))))));
     }
 };
 CoAppShell.style = coAppShellCss();

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

@@ -1,9 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
-import { R as RequiredMark } from './requiredMark-CEbXKHcU.js';
-import { i as initOverlayScroll } from './overlayScroll-Bpv882_z.js';
-import './overlayscrollbars-ox7HzCZn.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-tT-aZV0-.js';
+import { R as RequiredMark } from './requiredMark-C7-_2UhB.js';
 
-const coAutocompleteCss = () => `.os-size-observer,.os-size-observer-listener{scroll-behavior:auto !important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(0.1)}.os-size-observer::before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(calc(1 / 0.1))}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty::before{content:"";width:100%;height:100%}.os-size-observer-listener:empty::before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{from{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch !important;flex-direction:row !important;flex-wrap:nowrap !important;scroll-behavior:auto !important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw:0;--os-vah:0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden !important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible !important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x:hidden;--os-viewport-overflow-y:hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x:visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x:hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x:scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y:visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y:hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y:scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x) !important;overflow-y:var(--os-viewport-overflow-y) !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0 !important;line-height:0 !important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none !important;position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto !important;scroll-snap-type:none !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden !important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden !important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto !important;width:auto !important}@property --os-scroll-percent{syntax:"<number>";inherits:true;initial-value:0}@property --os-viewport-percent{syntax:"<number>";inherits:true;initial-value:0}.os-scrollbar{--os-viewport-percent:0;--os-scroll-percent:0;--os-scroll-direction:0;--os-scroll-percent-directional:calc(     var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *       var(--os-scroll-direction)   )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none !important}.os-scrollbar-track{position:relative;padding:0 !important;border:none !important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none !important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0 !important;transition:none !important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translateX(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size:0;--os-padding-perpendicular:0;--os-padding-axis:0;--os-track-border-radius:0;--os-track-bg:none;--os-track-bg-hover:none;--os-track-bg-active:none;--os-track-border:none;--os-track-border-hover:none;--os-track-border-active:none;--os-handle-border-radius:0;--os-handle-bg:none;--os-handle-bg-hover:none;--os-handle-bg-active:none;--os-handle-border:none;--os-handle-border-hover:none;--os-handle-border-active:none;--os-handle-min-size:33px;--os-handle-max-size:none;--os-handle-perpendicular-size:100%;--os-handle-perpendicular-size-hover:100%;--os-handle-perpendicular-size-active:100%;--os-handle-interactive-area-offset:0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none !important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-border-radius:10px;--os-handle-interactive-area-offset:4px;--os-handle-border-radius:10px}.os-theme-dark{--os-handle-bg:rgba(0, 0, 0, 0.44);--os-handle-bg-hover:rgba(0, 0, 0, 0.55);--os-handle-bg-active:rgba(0, 0, 0, 0.66)}.os-theme-light{--os-handle-bg:rgba(255, 255, 255, 0.44);--os-handle-bg-hover:rgba(255, 255, 255, 0.55);--os-handle-bg-active:rgba(255, 255, 255, 0.66)}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none !important;appearance:none !important;display:none !important;width:0 !important;height:0 !important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-autocomplete{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-autocomplete__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-autocomplete__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-autocomplete__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-autocomplete--disabled .co-autocomplete__label,.co-autocomplete--disabled .co-autocomplete__secondary-label{color:var(--co-semantic-text-disabled)}.co-autocomplete__field{display:flex;align-items:center;flex-wrap:wrap;gap:var(--co-spacing-xs);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, 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));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-autocomplete--s .co-autocomplete__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-autocomplete--sm .co-autocomplete__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-autocomplete--lg .co-autocomplete__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-autocomplete--focused .co-autocomplete__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-autocomplete--disabled .co-autocomplete__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-autocomplete--error .co-autocomplete__field{border-color:var(--co-semantic-status-error)}.co-autocomplete--success .co-autocomplete__field{border-color:var(--co-semantic-status-success)}.co-autocomplete--warning .co-autocomplete__field{border-color:var(--co-color-status-review)}.co-autocomplete--info .co-autocomplete__field{border-color:var(--co-semantic-status-info)}.co-autocomplete__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-autocomplete__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs)}.co-autocomplete__input{flex:1;min-width:80px;border:none;background:transparent;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:0;outline:none}.co-autocomplete__input::placeholder{color:var(--co-semantic-text-muted)}.co-autocomplete--disabled .co-autocomplete__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-autocomplete__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-autocomplete__clear:hover{color:var(--co-semantic-text-default)}.co-autocomplete__spinner{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-semantic-text-default);border-radius:var(--co-border-radius-full);animation:co-spin 0.6s linear infinite;flex-shrink:0}@keyframes co-spin{to{transform:rotate(360deg)}}.co-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:hidden;padding:var(--co-spacing-sm2)}.co-autocomplete__options{max-height:calc(34px * 8);overflow-y:auto}.os-scrollbar.os-theme-co{--os-size:10px;--os-padding-perpendicular:2px;--os-padding-axis:2px;--os-track-bg:transparent;--os-handle-border-radius:var(--co-border-radius-full);--os-handle-bg:var(--co-color-opacity-negro-16);--os-handle-bg-hover:var(--co-color-opacity-negro-25);--os-handle-bg-active:var(--co-color-opacity-negro-50);--os-handle-min-size:24px}.co-autocomplete__option{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background 0.1s ease;min-height:32px;box-sizing:border-box}.co-autocomplete__option:hover{background:var(--co-semantic-surface-hover)}.co-autocomplete__option--selected{background:var(--co-semantic-surface-muted)}.co-autocomplete__option--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-autocomplete__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-autocomplete__option-label{flex:1;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-autocomplete__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-autocomplete__loading,.co-autocomplete__empty{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-md);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14)}.co-autocomplete__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-autocomplete__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-autocomplete__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-autocomplete__helper--error .co-autocomplete__helper-icon,.co-autocomplete__helper--error .co-autocomplete__helper-text{color:var(--co-semantic-status-error)}.co-autocomplete__helper--success .co-autocomplete__helper-icon,.co-autocomplete__helper--success .co-autocomplete__helper-text{color:var(--co-semantic-status-success)}.co-autocomplete__helper--warning .co-autocomplete__helper-icon,.co-autocomplete__helper--warning .co-autocomplete__helper-text{color:var(--co-color-status-review)}.co-autocomplete__helper--info .co-autocomplete__helper-icon,.co-autocomplete__helper--info .co-autocomplete__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-autocomplete{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-autocomplete__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-autocomplete__label{white-space:normal}:host([layout='horizontal']) .co-autocomplete>:not(.co-autocomplete__labels){grid-column:2;min-width:0}.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-autocomplete__field{background:var(--co-semantic-surface-secondary)}}`;
+const coAutocompleteCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-autocomplete{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-autocomplete__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-autocomplete__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-autocomplete__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-autocomplete--disabled .co-autocomplete__label,.co-autocomplete--disabled .co-autocomplete__secondary-label{color:var(--co-semantic-text-disabled)}.co-autocomplete__field{display:flex;align-items:center;flex-wrap:wrap;gap:var(--co-spacing-xs);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-color-opacity-negro-25, rgba(31, 28, 27, 0.25));border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-autocomplete--s .co-autocomplete__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-autocomplete--sm .co-autocomplete__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-autocomplete--lg .co-autocomplete__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-autocomplete--focused .co-autocomplete__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-autocomplete--disabled .co-autocomplete__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-autocomplete--error .co-autocomplete__field{border-color:var(--co-semantic-status-error)}.co-autocomplete--success .co-autocomplete__field{border-color:var(--co-semantic-status-success)}.co-autocomplete--warning .co-autocomplete__field{border-color:var(--co-color-status-review)}.co-autocomplete--info .co-autocomplete__field{border-color:var(--co-semantic-status-info)}.co-autocomplete__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-autocomplete__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs)}.co-autocomplete__input{flex:1;min-width:80px;border:none;background:transparent;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:0;outline:none}.co-autocomplete__input::placeholder{color:var(--co-semantic-text-muted)}.co-autocomplete--disabled .co-autocomplete__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-autocomplete__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-autocomplete__clear:hover{color:var(--co-semantic-text-default)}.co-autocomplete__spinner{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-semantic-text-default);border-radius:var(--co-border-radius-full);animation:co-spin 0.6s linear infinite;flex-shrink:0}@keyframes co-spin{to{transform:rotate(360deg)}}.co-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:hidden;padding:var(--co-spacing-sm2)}.co-autocomplete__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-autocomplete__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-autocomplete__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-autocomplete__helper--error .co-autocomplete__helper-icon,.co-autocomplete__helper--error .co-autocomplete__helper-text{color:var(--co-semantic-status-error)}.co-autocomplete__helper--success .co-autocomplete__helper-icon,.co-autocomplete__helper--success .co-autocomplete__helper-text{color:var(--co-semantic-status-success)}.co-autocomplete__helper--warning .co-autocomplete__helper-icon,.co-autocomplete__helper--warning .co-autocomplete__helper-text{color:var(--co-color-status-review)}.co-autocomplete__helper--info .co-autocomplete__helper-icon,.co-autocomplete__helper--info .co-autocomplete__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-autocomplete{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-autocomplete__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-autocomplete__label{white-space:normal}:host([layout='horizontal']) .co-autocomplete>:not(.co-autocomplete__labels){grid-column:2;min-width:0}.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)')}`;
 
 const CoAutocomplete = class {
     constructor(hostRef) {
@@ -29,12 +27,11 @@ const CoAutocomplete = class {
         /** Minimum characters before emitting coSearch */
         this.minChars = 1;
         /** Debounce time in ms for coSearch */
-        this.debounce = 300;
+        this.searchDebounce = 300;
         /** Message when options are empty after search */
-        this.emptyText = 'No results';
+        this.emptyMessage = 'No results';
         this.isOpen = false;
         this.query = '';
-        this.scrollTop = 0;
         this.focused = false;
         this.handleInput = (e) => {
             const q = e.target.value;
@@ -42,7 +39,7 @@ const CoAutocomplete = class {
             if (this.debounceTimer)
                 clearTimeout(this.debounceTimer);
             if (q.length >= this.minChars) {
-                this.debounceTimer = setTimeout(() => this.coSearch.emit(q), this.debounce);
+                this.debounceTimer = setTimeout(() => this.coSearch.emit(q), this.searchDebounce);
                 this.isOpen = true;
             }
             else {
@@ -62,35 +59,43 @@ const CoAutocomplete = class {
             this.value = this.multiple ? '[]' : '';
             this.isOpen = false;
             this.coClear.emit();
-            this.coChange.emit(this.multiple ? [] : '');
+            this.coChange.emit({ value: this.multiple ? [] : '', item: null });
             (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        this.handleOptionClick = (optValue) => {
+        this.handleChipRemove = (val) => {
+            const sel = this.selectedValues.filter(v => v !== val);
+            this.value = JSON.stringify(sel);
+            this.coChange.emit({ value: sel, item: { _id: val, label: val } });
+        };
+        this.handleListChange = (detail) => {
             if (this.multiple) {
-                const sel = [...this.selectedValues];
-                const idx = sel.indexOf(optValue);
-                if (idx >= 0)
-                    sel.splice(idx, 1);
-                else
-                    sel.push(optValue);
-                this.value = JSON.stringify(sel);
-                this.coChange.emit(sel);
+                this.value = JSON.stringify(detail.value);
+                this.coChange.emit({ value: detail.value, item: detail.item });
             }
             else {
-                this.value = optValue;
-                const opt = this.parsedOptions.find(o => o.value === optValue);
-                this.query = opt ? opt.label : optValue;
+                this.value = detail.value;
+                this.query = detail.item.label;
                 this.isOpen = false;
-                this.coChange.emit(optValue);
+                this.coChange.emit({ value: detail.value, item: detail.item });
             }
         };
-        this.handleChipRemove = (val) => {
-            const sel = this.selectedValues.filter(v => v !== val);
-            this.value = JSON.stringify(sel);
-            this.coChange.emit(sel);
-        };
-        this.handleOptionsScroll = (e) => {
-            this.scrollTop = e.target.scrollTop;
+        this.handleInputKeyDown = async (e) => {
+            if (e.key === 'Escape') {
+                this.isOpen = false;
+                return;
+            }
+            if (!this.isOpen || !this.optionListEl)
+                return;
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+                // preventDefault BEFORE the await: handleKey() is async (it may run
+                // across a render tick), so a post-await preventDefault would land too
+                // late for the browser to honor it deterministically. The default
+                // behavior for these 3 keys on a single-line input is harmless either
+                // way (caret move / no-op submit), but calling it upfront removes any
+                // timing ambiguity instead of relying on that harmlessness.
+                e.preventDefault();
+                await this.optionListEl.handleKey(e);
+            }
         };
     }
     get parsedOptions() {
@@ -158,56 +163,19 @@ const CoAutocomplete = class {
             this.focused = false;
         }
     }
-    getVirtualSlice(items) {
-        const { ITEM_HEIGHT, VIEWPORT_ITEMS, OVERSCAN } = CoAutocomplete;
-        const total = items.length;
-        const totalHeight = total * ITEM_HEIGHT;
-        const startIdx = Math.max(0, Math.floor(this.scrollTop / ITEM_HEIGHT) - OVERSCAN);
-        const endIdx = Math.min(total, startIdx + VIEWPORT_ITEMS + OVERSCAN * 2);
-        const offsetY = startIdx * ITEM_HEIGHT;
-        return { totalHeight, startIdx, endIdx, offsetY };
-    }
-    // OverlayScrollbars: init when the dropdown is open, tear down when it closes.
-    // Virtual scroll keeps working — scrollTop is read from the OS viewport.
-    componentDidRender() {
-        if (this.isOpen && this.optionsEl && !this.osInstance) {
-            this.osInstance = initOverlayScroll(this.optionsEl, (vp) => { this.scrollTop = vp.scrollTop; });
-        }
-        else if (!this.isOpen && this.osInstance) {
-            this.osInstance.destroy();
-            this.osInstance = undefined;
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.osInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-        this.osInstance = undefined;
-    }
     render() {
         const options = this.parsedOptions;
         const selected = this.selectedValues;
-        return (h("div", { key: 'dfab9ff6344118bbaa21bc911671f701ca321d14', class: {
+        return (h("div", { key: 'a152ee025b4c76813f8783ba1cd0e6791a7372ee', class: {
                 'co-autocomplete': true,
-                'co-autocomplete--open': this.isOpen,
                 'co-autocomplete--disabled': this.disabled,
                 'co-autocomplete--focused': this.focused,
                 [`co-autocomplete--${this.size}`]: true,
                 [`co-autocomplete--${this.status}`]: this.status !== 'default',
-            } }, (this.label || this.secondaryLabel) && (h("div", { key: '2870599c3af0b8a7ee0ced25f54f3dff7118506e', class: "co-autocomplete__labels" }, this.label && h("label", { key: '2bd76cb15d591d71430ff0ac592b8c2910fdb4ce', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: '766aac3940792e1b04b48e44c76d02f754ded4c3', required: this.required })), this.secondaryLabel && h("span", { key: '7f0baeed0eaf6b877e4ee7177e27d8553b6ed82a', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: 'faff4ef114f15478992548784a11127f2d14ba27', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '8638177d1a8a17e68849c2ffffc386ad76b6365d', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: '59ba38d7a3b44d1502e6668920850098b140e2a3', class: "co-autocomplete__chips" }, selected.map(val => {
+            } }, (this.label || this.secondaryLabel) && (h("div", { key: '484443890da0c01c028716095ef2215f56b64e93', class: "co-autocomplete__labels" }, this.label && h("label", { key: '24fc760c0fa0322e1952d948e8daf463a4999226', class: "co-autocomplete__label" }, this.label, h(RequiredMark, { key: '250f449b8d860d5476652dd906b5405e76cba1d1', required: this.required })), this.secondaryLabel && h("span", { key: '5f7b6c3b0308cc031336d945ce629aa06495404d', class: "co-autocomplete__secondary-label" }, this.secondaryLabel))), h("div", { key: '632abdc8eb131cf8f5c482487d377d9297c11ad6', class: "co-autocomplete__field" }, this.iconLeft && h("co-icon", { key: '7c1f1af01c2a9b9686de933a38d4da0302f40cbc', name: this.iconLeft, size: 16, class: "co-autocomplete__icon" }), this.multiple && selected.length > 0 && (h("div", { key: 'bfe9c9fbce1c7050f928128fb77f8bf5018903d1', class: "co-autocomplete__chips" }, selected.map(val => {
             const opt = this.parsedOptions.find(o => o.value === val);
             return (h("co-chip", { label: opt ? opt.label : val, size: "small", removable: true, onCoRemove: () => this.handleChipRemove(val) }));
-        }))), h("input", { key: '0196cedcbccae1f159b3b3cf4575964a37398d6a', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus }), this.loading && h("div", { key: 'b9ab823198d9268c6fb97f60ddb91f508006d27c', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'e13078152b14056cd0640f90c26e68e1b2faa65a', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '8db7105cb2865347cb0340b5c1f2a5b5f9da13d3', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '101741284b39462d6f080c35dbec305e911674a9', class: "co-autocomplete__dropdown" }, this.loading && options.length === 0 ? (h("div", { class: "co-autocomplete__loading" }, h("co-loader", { size: "sm" }))) : options.length === 0 ? (h("div", { class: "co-autocomplete__empty" }, this.emptyText)) : (h("div", { class: "co-autocomplete__options", ref: el => (this.optionsEl = el), onScroll: this.handleOptionsScroll }, (() => {
-            const { totalHeight, startIdx, endIdx, offsetY } = this.getVirtualSlice(options);
-            return (h("div", { class: "co-autocomplete__virtual-spacer", style: { height: `${totalHeight}px`, position: 'relative' } }, h("div", { style: { position: 'absolute', top: `${offsetY}px`, left: '0', right: '0' } }, options.slice(startIdx, endIdx).map(opt => {
-                const isSelected = selected.includes(opt.value);
-                const isDisabled = !!opt.disabled;
-                return (h("div", { class: {
-                        'co-autocomplete__option': true,
-                        'co-autocomplete__option--selected': isSelected,
-                        'co-autocomplete__option--disabled': isDisabled,
-                    }, onClick: () => !isDisabled && this.handleOptionClick(opt.value) }, opt.icon && h("co-icon", { name: opt.icon, size: 20, class: "co-autocomplete__option-icon" }), h("span", { class: "co-autocomplete__option-label" }, opt.label), isSelected && h("co-icon", { name: "check", size: 16, class: "co-autocomplete__option-check" })));
-            }))));
-        })())))), this.helperText && (h("div", { key: '10718ee7ba24570057e2f130ef950b304c510c02', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'e8d88e8278f9ea3b28f6b5767991e484d6fc7eb6', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '0a9a6ef20def10b8efe92c55d3e66f1acd34525f', class: "co-autocomplete__helper-text" }, this.helperText)))));
+        }))), h("input", { key: 'fc621839dde68853a1b28231551e6cb0a6f415e7', ref: el => (this.inputEl = el), class: "co-autocomplete__input", type: "text", value: this.query, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleInputKeyDown }), this.loading && h("div", { key: 'fbe41e89ca6202a4de04a09437f1f11f756f25eb', class: "co-autocomplete__spinner" }), this.clearable && (this.hasValue || this.query) && !this.disabled && (h("button", { key: 'e3096cd897d7a98fa7cd203d21eb57dc6ce961a5', class: "co-autocomplete__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: '3211cf54fcdae0a73afb62e2b6cb25081486f3a7', name: "x-circle", size: 16, weight: "fill" })))), this.isOpen && (h("div", { key: '9c5e500a17c9486b6834c46be9e95c0e0fea6beb', class: "co-autocomplete__dropdown" }, h("co-option-list", { key: 'b44c39253a07c470dc5e059223fce58548e8d02d', ref: (el) => (this.optionListEl = el), items: JSON.stringify(options.map((o) => ({ _id: o.value, label: o.label, icon: o.icon, disabled: o.disabled }))), value: this.multiple ? JSON.stringify(this.selectedValues) : (this.selectedValues[0] || ''), multiple: this.multiple, selectedAffordance: "check", virtual: true, loading: this.loading, emptyMessage: this.emptyMessage, onCoChange: (e) => this.handleListChange(e.detail) }))), this.helperText && (h("div", { key: '30ac040bfef45e66d1b18bfdda9b5b07b8f2c3d5', class: `co-autocomplete__helper co-autocomplete__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'a4fc8c4c9695c13cd515d9b7562986a62bf07110', name: this.statusIcon, size: 14, weight: "fill", class: "co-autocomplete__helper-icon" }), h("span", { key: '4a7f3031b62c451e0561024d232331b1c7679a07', class: "co-autocomplete__helper-text" }, this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -219,9 +187,6 @@ const CoAutocomplete = class {
             }]
     }; }
 };
-CoAutocomplete.ITEM_HEIGHT = 34;
-CoAutocomplete.VIEWPORT_ITEMS = 8;
-CoAutocomplete.OVERSCAN = 3;
 CoAutocomplete.style = coAutocompleteCss();
 
 export { CoAutocomplete as co_autocomplete };

package/dist/esm/co-avatar-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CYsftTKf.js';
+import { r as registerInstance, c as createEvent, h } from './index-tT-aZV0-.js';
 
 const coAvatarGroupCss = () => `:host{display:inline-flex}.co-avatar-group{display:inline-flex;align-items:center}.co-avatar-group--interactive{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;border-radius:var(--co-border-radius-full);outline:none;transition:opacity 0.12s ease}.co-avatar-group--interactive:hover{opacity:0.88}.co-avatar-group--interactive:focus-visible{box-shadow:0 0 0 2px var(--co-semantic-surface-page), 0 0 0 4px var(--co-semantic-border-focus)}.co-avatar-group__slot{display:inline-flex;align-items:center;line-height:0}.co-avatar-group>*:not(:first-child){margin-left:calc(-1 * var(--co-avatar-group-overlap, var(--co-spacing-sm)))}.co-avatar-group__avatar::part(avatar),.co-avatar-group__overflow{box-shadow:0 0 0 var(--co-avatar-group-ring-width, 2px) var(--co-semantic-surface-page)}.co-avatar-group__avatar,.co-avatar-group__overflow{vertical-align:middle}.co-avatar-group__overflow{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);font-family:var(--co-font-family-primary);font-weight:600;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);flex-shrink:0;user-select:none;-webkit-font-smoothing:antialiased}`;
 
@@ -61,13 +61,13 @@ const CoAvatarGroup = class {
                 onClick: this.activate,
             }
             : { role: 'group' };
-        return (h(Tag, Object.assign({ key: 'a85fa472bfcf9e7a22ab68c14dff8c79cce33526', class: {
+        return (h(Tag, Object.assign({ key: 'efe3aa5c3a13c33d220caf93f8ce7dfc929f9833', class: {
                 'co-avatar-group': true,
                 'co-avatar-group--interactive': this.interactive,
             } }, interactiveAttrs), visible.map((it, i) => {
             var _a, _b, _c;
             return (h("co-tooltip", { key: i, class: "co-avatar-group__slot", content: it.name || it.text || '', placement: "bottom" }, h("co-avatar", { class: "co-avatar-group__avatar", type: (_a = it.type) !== null && _a !== void 0 ? _a : (it.src ? 'image' : it.icon ? 'icon' : 'text'), size: this.size, shape: (_b = it.shape) !== null && _b !== void 0 ? _b : this.shape, text: it.text, src: it.src, icon: (_c = it.icon) !== null && _c !== void 0 ? _c : 'user', color: it.color, "ring-color": it.ringColor })));
-        }), extra > 0 && (h("co-tooltip", { key: 'd6f5867903da085b23395cbad94381241297f539', class: "co-avatar-group__slot", content: overflowLabel, placement: "bottom" }, h("div", { key: 'a362b8e4262735c4adb7b917d501ccc3d760bdae', class: "co-avatar-group__overflow", style: { width: `${dim}px`, height: `${dim}px`, fontSize }, role: "img", "aria-label": `+${extra}` }, "+", extra)))));
+        }), extra > 0 && (h("co-tooltip", { key: 'c2888162dd23d0b1a2c853e6adbe7a8f5f61efe5', class: "co-avatar-group__slot", content: overflowLabel, placement: "bottom" }, h("div", { key: '5f0d9a321b52db23356b107564605b18b8c75692', class: "co-avatar-group__overflow", style: { width: `${dim}px`, height: `${dim}px`, fontSize }, role: "img", "aria-label": `+${extra}` }, "+", extra)))));
     }
 };
 CoAvatarGroup.style = coAvatarGroupCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CYsftTKf.js';
+import { r as registerInstance, h } from './index-tT-aZV0-.js';
 
 /**
  * Shared color utilities for Cobalt components.
@@ -64,12 +64,17 @@ const CoAvatar = class {
         };
     }
     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: '41da32ebacadf5fd33c9f6a10ac0069ddaa81ce6', class: {
                 'co-avatar': true,
                 [`co-avatar--${this.size}`]: true,
                 [`co-avatar--${this.type}`]: true,
@@ -77,7 +82,7 @@ const CoAvatar = class {
                 '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))));
     }
 };
 CoAvatar.style = coAvatarCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CYsftTKf.js';
+import { r as registerInstance, h } from './index-tT-aZV0-.js';
 
 const coBadgeCss = () => `:host{display:inline-flex}.co-badge{display:inline-block;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-badge--large{width:16px;height:16px}.co-badge--small{width:6px;height:6px}.co-badge--default{background:var(--co-semantic-surface-primary)}.co-badge--success{background:var(--co-semantic-status-success)}.co-badge--error{background:var(--co-semantic-status-error)}.co-badge--warning{background:var(--co-semantic-status-warning)}.co-badge--info{background:var(--co-semantic-status-info)}`;
 
@@ -14,7 +14,7 @@ const CoBadge = class {
         this.color = 'default';
     }
     render() {
-        return (h("span", { key: '89a5de192302652fe4b9c41175c9ed38de22549b', class: {
+        return (h("span", { key: 'f805a0acdea25b90802785fa7cf5e7115d60e3c3', class: {
                 'co-badge': true,
                 [`co-badge--${this.size}`]: true,
                 [`co-badge--${this.color}`]: true,

package/dist/esm/co-bottom-sheet.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-tT-aZV0-.js';
 
 /**
  * Pure gesture math for co-bottom-sheet (DOM-free, unit-tested).
@@ -303,13 +303,13 @@ const CoBottomSheet = class {
         (_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: '6655150e6dfb829ae937433983d93e0a16b4f544', class: { 'co-bottom-sheet-root': true, 'co-bottom-sheet-root--open': this.open } }, h("div", { key: '3657a637ec0ac2705375805381be639bc3da4b82', class: "co-bottom-sheet__backdrop", part: "backdrop", onClick: this.handleBackdropClick, ref: (el) => (this.backdropEl = el) }), h("section", { key: 'f3cac714dbc2703506a51fd960c34b64b33731b1', 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: '063d6b43784022a2646614b0462c8c8dccce1320', class: "co-bottom-sheet__grip", onPointerDown: this.handleGripPointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel }, this.showHandle && (h("div", { key: '8e9611f02a9d59e9af91d77b476b7e8f93724aa4', class: "co-bottom-sheet__handle", part: "handle", "aria-hidden": "true" })), h("header", { key: 'f58de5177d9620ea61cffba530ef190936537194', 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: '76fda370a9276e99d41782f08312e6e887dafd21', name: "header", onSlotchange: this.handleHeaderSlotChange }, this.heading && (h("h2", { key: 'dcc7ba68ba7b306805ca49881a4808947217392a', class: "co-bottom-sheet__heading", id: "co-bottom-sheet-heading" }, this.heading))))), h("div", { key: '55fd08122d422bbfe0cef9d7a64297e481349172', 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: '3c86d67c93d8c64458e431ab959704f4e43b382b' })), h("footer", { key: '14a97f22eee74e514111d87414e23cf1580e1456', 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: 'd2b6fbeca8233f3d6e33d6be7b05bd4a2fe5d59f', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/co-breadcrumb-item.entry.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-tT-aZV0-.js';
+
+const coBreadcrumbItemCss = () => `:host{display:inline-flex;align-items:center;min-width:0}.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)}:host(:first-child) .co-breadcrumb-item__sep{display:none}.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}.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;}.co-breadcrumb-item__label{min-width:0;overflow:hidden;text-overflow:ellipsis}`;
+
+const CoBreadcrumbItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coSelect = createEvent(this, "coSelect", 7);
+        /** 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: '984f754b9123ff35cf5f0239ad4fc103498e47b4', part: "breadcrumb-item", class: {
+                'co-breadcrumb-item': true,
+                'co-breadcrumb-item--current': this.current,
+            } }, h("span", { key: '4eb611d93cd5bd980eec023e0295f5c6b8fd7901', class: "co-breadcrumb-item__sep", "aria-hidden": "true" }, h("co-icon", { key: '858d8393d7025b0f2c128c9fa21420f37f2e5fca', name: this.separator, size: 13 })), h("span", { key: '8ca11884ee1fa419593925bc704e16026f376bfc', 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: '6fbbaaa99958fd14f67f0ca8441333e5410f546d', class: "co-breadcrumb-item__icon" }, h("co-icon", { key: 'a8b5c0170d2016e9a90a823341955a93d5ce8686', name: this.icon, size: 16 }))), h("span", { key: '77e9c2f8da437bc35bfb07e7d6caf3a959c96036', class: "co-breadcrumb-item__label" }, this.label, h("slot", { key: '10cb84e411006ff74528ae4ee9610e560929535f' })))));
+    }
+    get el() { return getElement(this); }
+};
+CoBreadcrumbItem.style = coBreadcrumbItemCss();
+
+export { CoBreadcrumbItem as co_breadcrumb_item };

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

@@ -0,0 +1,53 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-tT-aZV0-.js';
+
+const coBreadcrumbCss = () => `:host{display:flex;align-items:center;gap:var(--co-spacing-xs, 4px);min-width:0}`;
+
+const CoBreadcrumb = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** 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: '3306e9e038677813f1c16183e4fb3a146d723643', 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 })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "separator": [{
+                "watchSeparator": 0
+            }]
+    }; }
+};
+CoBreadcrumb.style = coBreadcrumbCss();
+
+export { CoBreadcrumb as co_breadcrumb };

package/dist/esm/co-button-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CYsftTKf.js';
+import { r as registerInstance, h } from './index-tT-aZV0-.js';
 
 const coButtonGroupCss = () => `:host{display:inline-flex}.co-button-group{display:inline-flex;gap:0}.co-button-group--row{flex-direction:row}.co-button-group--column{flex-direction:column}.co-button-group--row ::slotted(co-button){--co-btn-border-radius:0}.co-button-group--row ::slotted(co-button:first-child){--co-btn-border-radius-left:var(--co-border-radius-xs)}.co-button-group--row ::slotted(co-button:last-child){--co-btn-border-radius-right:var(--co-border-radius-xs)}.co-button-group--column ::slotted(co-button){--co-btn-border-radius:0;width:100%}.co-button-group--column ::slotted(co-button:first-child){--co-btn-border-radius-top:var(--co-border-radius-xs)}.co-button-group--column ::slotted(co-button:last-child){--co-btn-border-radius-bottom:var(--co-border-radius-xs)}.co-button-group--stroke.co-button-group--row ::slotted(co-button:not(:first-child)){margin-left:-1px}.co-button-group--stroke.co-button-group--column ::slotted(co-button:not(:first-child)){margin-top:-1px}.co-button-group--disabled{opacity:0.4;pointer-events:none}`;
 
@@ -14,12 +14,12 @@ const CoButtonGroup = class {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: 'd95d8e7435cdef2385751f66442871f0f3bfea3b', class: {
+        return (h("div", { key: '4a058e55c2e0ede15115f25ff2bb91ea5b7f88ca', 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: '3d51651d39929c6989129c5dc9e8f5536598f1ac' })));
     }
 };
 CoButtonGroup.style = coButtonGroupCss();

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, a as getElement } from './index-CYsftTKf.js';
+import { r as registerInstance, h, a as getElement } from './index-tT-aZV0-.js';
 
-const coButtonCss = () => `:host{display:inline-flex}.co-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;-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))}.co-button--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: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:color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-button--ghost{background:transparent;color:var(--co-semantic-text-default);border-color:transparent;-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}.co-button--rounded.co-button--l{padding:var(--co-spacing-xl) var(--co-spacing-2xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--m{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-16);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--s{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-14);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--xs{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-12);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--square.co-button--l{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-border-radius-lg)}.co-button--square.co-button--m{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-16);border-radius:var(--co-border-radius-sm)}.co-button--square.co-button--s{padding:var(--co-spacing-sm2) var(--co-spacing-md);gap:var(--co-spacing-sm);font-size:var(--co-font-size-14);border-radius:var(--co-border-radius-xs)}.co-button--square.co-button--xs{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:var(--co-spacing-xs);font-size:var(--co-font-size-12);border-radius:var(--co-spacing-sm)}.co-button--disabled,.co-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-button--primary:hover:not(:disabled){opacity:0.88}.co-button--secondary: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}::slotted([slot="icon-left"]),::slotted([slot="icon-right"]){display:inline-flex;flex-shrink:0}@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}}`;
+const coButtonCss = () => `:host{display:inline-flex}.co-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;outline:none;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;-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))}.co-button--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: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:color-mix(in srgb, var(--co-semantic-surface-secondary) 25%, transparent);color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-button--ghost{background:transparent;color:var(--co-semantic-text-default);border-color:transparent;-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}.co-button--rounded.co-button--l{padding:var(--co-spacing-xl) var(--co-spacing-2xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--m{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-16);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--s{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-14);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--rounded.co-button--xs{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-12);border-radius:var(--co-button-radius, var(--co-border-radius-full))}.co-button--square.co-button--l{padding:var(--co-spacing-lg) var(--co-spacing-xl);gap:var(--co-spacing-md);font-size:var(--co-font-size-18);border-radius:var(--co-border-radius-lg)}.co-button--square.co-button--m{padding:var(--co-spacing-md) var(--co-spacing-lg);gap:var(--co-spacing-sm2);font-size:var(--co-font-size-16);border-radius:var(--co-border-radius-sm)}.co-button--square.co-button--s{padding:var(--co-spacing-sm2) var(--co-spacing-md);gap:var(--co-spacing-sm);font-size:var(--co-font-size-14);border-radius:var(--co-border-radius-xs)}.co-button--square.co-button--xs{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:var(--co-spacing-xs);font-size:var(--co-font-size-12);border-radius:var(--co-spacing-sm)}.co-button--disabled,.co-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-button--primary:hover:not(:disabled){opacity:0.88}.co-button--secondary: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}.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)}.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}::slotted([slot="icon-left"]),::slotted([slot="icon-right"]){display:inline-flex;flex-shrink:0}@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}}`;
 
 const ICON_SIZE = { l: 20, m: 18, s: 16, xs: 14 };
 const CoButton = class {
@@ -12,6 +12,10 @@ const CoButton = class {
         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 */
@@ -43,15 +47,17 @@ const CoButton = class {
             customStyle.background = this.color;
         if (this.textColor)
             customStyle.color = this.textColor;
-        return (h("button", { key: '05a61f0d95bb3c6e09207bb643545694c40b0976', class: {
+        return (h("button", { key: '7ecb9c79b6d2f333ad50f71847953ef676692a81', 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: 'b7a325f24ec63c71121dfb74e82467e4b36fdd06' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }