@prolibu-suite/cobalt-core 0.4.0 → 0.6.0

package/dist/types/components.d.ts

@@ -12,7 +12,7 @@ import { CheckboxOption } from "./components/co-checkbox-group/co-checkbox-group
 import { ColorPreset } from "./components/co-color-picker/presets";
 import { ColumnOption, ColumnSection } from "./components/co-column-picker/utils/column-picker-tree";
 import { ComboboxOption } from "./components/co-combobox/co-combobox";
-import { CommandItem } from "./components/co-command-search/commandSearchGroup";
+import { CommandItem } from "./components/co-command-search/co-command-search";
 import { CoDataTableColumn } from "./components/co-data-table/co-data-table";
 import { Placement } from "./utils/positioning";
 import { DateRangeValue } from "./components/co-date-range-picker/co-date-range-picker";
@@ -36,7 +36,7 @@ export { CheckboxOption } from "./components/co-checkbox-group/co-checkbox-group
 export { ColorPreset } from "./components/co-color-picker/presets";
 export { ColumnOption, ColumnSection } from "./components/co-column-picker/utils/column-picker-tree";
 export { ComboboxOption } from "./components/co-combobox/co-combobox";
-export { CommandItem } from "./components/co-command-search/commandSearchGroup";
+export { CommandItem } from "./components/co-command-search/co-command-search";
 export { CoDataTableColumn } from "./components/co-data-table/co-data-table";
 export { Placement } from "./utils/positioning";
 export { DateRangeValue } from "./components/co-date-range-picker/co-date-range-picker";
@@ -54,6 +54,10 @@ export { NavigateDetail } from "./components/co-sidebar-nav/co-sidebar-nav";
 export { CoToastActionsLayout, CoToastVariant } from "./components/co-toast/co-toast";
 export { TransferOption } from "./components/co-transfer-list/co-transfer-list";
 export namespace Components {
+    /**
+     * Collapsible section. The caret button is the ONLY toggle trigger — clicking
+     * the header text does nothing (it may contain interactive content).
+     */
     interface CoAccordion {
         /**
           * Hide the chevron / disable the toggle interaction.
@@ -96,11 +100,6 @@ export namespace Components {
           * @default true
          */
         "clearable": boolean;
-        /**
-          * Debounce time in ms for coSearch
-          * @default 300
-         */
-        "debounce": number;
         /**
           * @default false
          */
@@ -109,7 +108,7 @@ export namespace Components {
           * Message when options are empty after search
           * @default 'No results'
          */
-        "emptyText": string;
+        "emptyMessage": string;
         "helperText"?: string;
         "iconLeft"?: string;
         "label"?: string;
@@ -145,6 +144,11 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * Debounce time in ms for coSearch
+          * @default 300
+         */
+        "searchDebounce": number;
         "secondaryLabel"?: string;
         /**
           * Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48.
@@ -899,6 +903,11 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Message shown when the filtered list is empty.
+          * @default 'No results found'
+         */
+        "emptyMessage": string;
         /**
           * Label for the primary footer button
           * @default 'Ok'
@@ -1081,6 +1090,16 @@ export namespace Components {
           * @default ''
          */
         "emptyTitle": string;
+        /**
+          * Fields with an active column filter (funnel filled + always visible). JSON string or array.
+          * @default '[]'
+         */
+        "filteredFields": string | string[];
+        /**
+          * Fields filtered by OTHER filter layers (funnel dimmed hint). JSON string or array.
+          * @default '[]'
+         */
+        "indirectFilteredFields": string | string[];
         /**
           * Show loading skeleton
           * @default false
@@ -1771,6 +1790,10 @@ export namespace Components {
         "view": 'month' | 'week' | 'day' | 'agenda';
     }
     interface CoFab {
+        /**
+          * Accessible label for icon-only FABs (falls back to `label`/`icon`).
+         */
+        "ariaLabelText"?: string;
         /**
           * @default false
          */
@@ -1788,7 +1811,7 @@ export namespace Components {
         /**
           * @default 'm'
          */
-        "size": 'l' | 'm' | 's';
+        "size": 'xl' | 'l' | 'm' | 's';
         /**
           * @default 'primary'
          */
@@ -1994,6 +2017,11 @@ export namespace Components {
           * Label for the integrated action button (Botón variant)
          */
         "actionLabel"?: string;
+        /**
+          * Focus the inner input as soon as the component finishes hydrating. Consumers can't reliably focus the shadow input themselves — Stencil's lazy hydration replaces the shadow content AFTER mount, so an early focus() lands on a node that gets thrown away. `componentDidLoad` runs after hydration, which is exactly the right moment.
+          * @default false
+         */
+        "autoFocus": boolean;
         /**
           * Autocomplete hint for the browser
          */
@@ -2057,6 +2085,10 @@ export namespace Components {
           * Secondary label displayed on the right side
          */
         "secondaryLabel"?: string;
+        /**
+          * Programmatically focus the inner input (post-hydration safe).
+         */
+        "setFocus": () => Promise<void>;
         /**
           * Size variant: s (28px), sm (32px), md (40px, default), lg (48px). In the filled search-pill variant (`fill`) this drives the pill height instead (s ≈ 38px).
           * @default 'md'
@@ -2524,6 +2556,11 @@ export namespace Components {
      * host. Es 100% controlada: no muta `value`; emite y el host decide.
      */
     interface CoOptionList {
+        /**
+          * Auto-resalta la primera fila navegable al montar y en cada cambio de items (paridad command-palette: tipear + Enter = primer resultado). Salta filas disabled vía nextActiveIndex.
+          * @default false
+         */
+        "autoHighlight": boolean;
         /**
           * @default 'circle'
          */
@@ -2937,10 +2974,6 @@ export namespace Components {
           * @default true
          */
         "clearable": boolean;
-        /**
-          * If set, shows a "Create" button in the panel footer.
-         */
-        "createLabel"?: string;
         /**
           * @default false
          */
@@ -3530,10 +3563,10 @@ export namespace Components {
          */
         "value": string;
         /**
-          * Visual variant: filled pill (default) or underline tab
+          * Visual variant: filled pill (default), underline tab, or segmented-control pill
           * @default 'pill'
          */
-        "variant": 'pill' | 'underline';
+        "variant": 'pill' | 'underline' | 'segmented';
     }
     interface CoTabGroup {
         /**
@@ -3544,7 +3577,7 @@ export namespace Components {
           * Visual variant, propagated to slotted co-tab children
           * @default 'pill'
          */
-        "variant": 'pill' | 'underline';
+        "variant": 'pill' | 'underline' | 'segmented';
     }
     /**
      * Free-text tags input — type a value and press Enter/Tab (or comma) to add it
@@ -4278,6 +4311,10 @@ declare global {
     interface HTMLCoAccordionElementEventMap {
         "coToggle": boolean;
     }
+    /**
+     * Collapsible section. The caret button is the ONLY toggle trigger — clicking
+     * the header text does nothing (it may contain interactive content).
+     */
     interface HTMLCoAccordionElement extends Components.CoAccordion, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCoAccordionElementEventMap>(type: K, listener: (this: HTMLCoAccordionElement, ev: CoAccordionCustomEvent<HTMLCoAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4314,7 +4351,7 @@ declare global {
     };
     interface HTMLCoAutocompleteElementEventMap {
         "coSearch": string;
-        "coChange": string | string[];
+        "coChange": { value: string | string[]; item: { _id: string; label: string } | null };
         "coClear": void;
     }
     interface HTMLCoAutocompleteElement extends Components.CoAutocomplete, HTMLStencilElement {
@@ -4605,7 +4642,7 @@ declare global {
         new (): HTMLCoColumnPickerElement;
     };
     interface HTMLCoComboboxElementEventMap {
-        "coChange": string[];
+        "coChange": { value: string[] | string; item: { _id: string; label: string } | null };
         "coOpen": void;
         "coClose": void;
         "coClear": void;
@@ -4629,7 +4666,7 @@ declare global {
     interface HTMLCoCommandSearchElementEventMap {
         "coSelect": string;
         "coClose": void;
-        "coQueryChange": string;
+        "coSearch": string;
         "coScopeChange": string;
         "coBackspaceEmpty": string;
         "coChipRemove": number;
@@ -4660,6 +4697,7 @@ declare global {
         "coSelectAll": { selected: boolean };
         "coColumnResize": { field: string; width: number };
         "coColumnPin": { field: string };
+        "coHeaderFilter": { field: string; rect: { top: number; left: number; bottom: number; right: number; width: number; height: number } };
         "coRowDblClick": { row: any; index: number };
         "coRowClick": { row: any; index: number };
         "coEmptyAction": void;
@@ -5491,7 +5529,6 @@ declare global {
         "coLoadMore": void;
         "coOpen": void;
         "coClose": void;
-        "coCreate": string;
         "coRemove": string;
         "coFooterPrimary": void;
         "coFooterSecondary": void;
@@ -5995,6 +6032,10 @@ declare global {
 declare namespace LocalJSX {
     type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
 
+    /**
+     * Collapsible section. The caret button is the ONLY toggle trigger — clicking
+     * the header text does nothing (it may contain interactive content).
+     */
     interface CoAccordion {
         /**
           * Hide the chevron / disable the toggle interaction.
@@ -6045,11 +6086,6 @@ declare namespace LocalJSX {
           * @default true
          */
         "clearable"?: boolean;
-        /**
-          * Debounce time in ms for coSearch
-          * @default 300
-         */
-        "debounce"?: number;
         /**
           * @default false
          */
@@ -6058,7 +6094,7 @@ declare namespace LocalJSX {
           * Message when options are empty after search
           * @default 'No results'
          */
-        "emptyText"?: string;
+        "emptyMessage"?: string;
         "helperText"?: string;
         "iconLeft"?: string;
         "label"?: string;
@@ -6080,7 +6116,7 @@ declare namespace LocalJSX {
           * @default false
          */
         "multiple"?: boolean;
-        "onCoChange"?: (event: CoAutocompleteCustomEvent<string | string[]>) => void;
+        "onCoChange"?: (event: CoAutocompleteCustomEvent<{ value: string | string[]; item: { _id: string; label: string } | null }>) => void;
         "onCoClear"?: (event: CoAutocompleteCustomEvent<void>) => void;
         /**
           * Fired when the user types (after debounce). Host should fetch and set options.
@@ -6100,6 +6136,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "required"?: boolean;
+        /**
+          * Debounce time in ms for coSearch
+          * @default 300
+         */
+        "searchDebounce"?: number;
         "secondaryLabel"?: string;
         /**
           * Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48.
@@ -6928,6 +6969,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Message shown when the filtered list is empty.
+          * @default 'No results found'
+         */
+        "emptyMessage"?: string;
         /**
           * Label for the primary footer button
           * @default 'Ok'
@@ -6961,9 +7007,9 @@ declare namespace LocalJSX {
          */
         "multiple"?: boolean;
         /**
-          * Emitted when the selection changes
+          * Emitted when the selection changes. `item` is the picked option (the option-list's native `{ _id, label }` shape); `null` on clear.
          */
-        "onCoChange"?: (event: CoComboboxCustomEvent<string[]>) => void;
+        "onCoChange"?: (event: CoComboboxCustomEvent<{ value: string[] | string; item: { _id: string; label: string } | null }>) => void;
         /**
           * Emitted when the clear button is clicked
          */
@@ -7097,11 +7143,11 @@ declare namespace LocalJSX {
           * Emitted when the "Más ▾" overflow tab is clicked.
          */
         "onCoMoreTabs"?: (event: CoCommandSearchCustomEvent<void>) => void;
-        "onCoQueryChange"?: (event: CoCommandSearchCustomEvent<string>) => void;
         /**
           * Emitted when an item with keepOpen=true is selected. Detail = item.value (scope model key).
          */
         "onCoScopeChange"?: (event: CoCommandSearchCustomEvent<string>) => void;
+        "onCoSearch"?: (event: CoCommandSearchCustomEvent<string>) => void;
         "onCoSelect"?: (event: CoCommandSearchCustomEvent<string>) => void;
         /**
           * Emitted when a module tab is clicked. detail = tab value; '' when the active tab is re-clicked (deselect).
@@ -7157,6 +7203,16 @@ declare namespace LocalJSX {
           * @default ''
          */
         "emptyTitle"?: string;
+        /**
+          * Fields with an active column filter (funnel filled + always visible). JSON string or array.
+          * @default '[]'
+         */
+        "filteredFields"?: string | string[];
+        /**
+          * Fields filtered by OTHER filter layers (funnel dimmed hint). JSON string or array.
+          * @default '[]'
+         */
+        "indirectFilteredFields"?: string | string[];
         /**
           * Show loading skeleton
           * @default false
@@ -7174,6 +7230,10 @@ declare namespace LocalJSX {
           * Fired when the prop-driven empty-action button (`emptyActionLabel`) is clicked.
          */
         "onCoEmptyAction"?: (event: CoDataTableCustomEvent<void>) => void;
+        /**
+          * Emitted when a column's filter icon is clicked (rect = icon bounding box for anchoring).
+         */
+        "onCoHeaderFilter"?: (event: CoDataTableCustomEvent<{ field: string; rect: { top: number; left: number; bottom: number; right: number; width: number; height: number } }>) => void;
         /**
           * Emitted when a row is clicked
          */
@@ -7991,6 +8051,10 @@ declare namespace LocalJSX {
         "view"?: 'month' | 'week' | 'day' | 'agenda';
     }
     interface CoFab {
+        /**
+          * Accessible label for icon-only FABs (falls back to `label`/`icon`).
+         */
+        "ariaLabelText"?: string;
         /**
           * @default false
          */
@@ -8009,7 +8073,7 @@ declare namespace LocalJSX {
         /**
           * @default 'm'
          */
-        "size"?: 'l' | 'm' | 's';
+        "size"?: 'xl' | 'l' | 'm' | 's';
         /**
           * @default 'primary'
          */
@@ -8239,6 +8303,11 @@ declare namespace LocalJSX {
           * Label for the integrated action button (Botón variant)
          */
         "actionLabel"?: string;
+        /**
+          * Focus the inner input as soon as the component finishes hydrating. Consumers can't reliably focus the shadow input themselves — Stencil's lazy hydration replaces the shadow content AFTER mount, so an early focus() lands on a node that gets thrown away. `componentDidLoad` runs after hydration, which is exactly the right moment.
+          * @default false
+         */
+        "autoFocus"?: boolean;
         /**
           * Autocomplete hint for the browser
          */
@@ -8849,6 +8918,11 @@ declare namespace LocalJSX {
      * host. Es 100% controlada: no muta `value`; emite y el host decide.
      */
     interface CoOptionList {
+        /**
+          * Auto-resalta la primera fila navegable al montar y en cada cambio de items (paridad command-palette: tipear + Enter = primer resultado). Salta filas disabled vía nextActiveIndex.
+          * @default false
+         */
+        "autoHighlight"?: boolean;
         /**
           * @default 'circle'
          */
@@ -9279,10 +9353,6 @@ declare namespace LocalJSX {
           * @default true
          */
         "clearable"?: boolean;
-        /**
-          * If set, shows a "Create" button in the panel footer.
-         */
-        "createLabel"?: string;
         /**
           * @default false
          */
@@ -9330,7 +9400,6 @@ declare namespace LocalJSX {
         "onCoChange"?: (event: CoRefFieldCustomEvent<{ value: string | string[]; item: RefFieldOption }>) => void;
         "onCoClear"?: (event: CoRefFieldCustomEvent<void>) => void;
         "onCoClose"?: (event: CoRefFieldCustomEvent<void>) => void;
-        "onCoCreate"?: (event: CoRefFieldCustomEvent<string>) => void;
         "onCoFooterPrimary"?: (event: CoRefFieldCustomEvent<void>) => void;
         "onCoFooterSecondary"?: (event: CoRefFieldCustomEvent<void>) => void;
         "onCoLoadMore"?: (event: CoRefFieldCustomEvent<void>) => void;
@@ -9930,10 +9999,10 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Visual variant: filled pill (default) or underline tab
+          * Visual variant: filled pill (default), underline tab, or segmented-control pill
           * @default 'pill'
          */
-        "variant"?: 'pill' | 'underline';
+        "variant"?: 'pill' | 'underline' | 'segmented';
     }
     interface CoTabGroup {
         /**
@@ -9948,7 +10017,7 @@ declare namespace LocalJSX {
           * Visual variant, propagated to slotted co-tab children
           * @default 'pill'
          */
-        "variant"?: 'pill' | 'underline';
+        "variant"?: 'pill' | 'underline' | 'segmented';
     }
     /**
      * Free-text tags input — type a value and press Enter/Tab (or comma) to add it
@@ -10511,8 +10580,8 @@ declare namespace LocalJSX {
         "multiple": boolean;
         "loading": boolean;
         "minChars": number;
-        "debounce": number;
-        "emptyText": string;
+        "searchDebounce": number;
+        "emptyMessage": string;
     }
     interface CoAvatarAttributes {
         "type": 'text' | 'icon' | 'image';
@@ -10702,6 +10771,7 @@ declare namespace LocalJSX {
         "footerPrimaryLabel": string;
         "footerSecondaryLabel": string;
         "options": ComboboxOption[] | string[] | string;
+        "emptyMessage": string;
         "value": string[] | string;
         "multiple": boolean;
         "size": 's' | 'sm' | 'md' | 'lg';
@@ -10737,6 +10807,8 @@ declare namespace LocalJSX {
         "emptyActionIcon": string;
         "sortField": string;
         "sortOrder": 'asc' | 'desc' | '';
+        "filteredFields": string | string[];
+        "indirectFilteredFields": string | string[];
         "selectable": boolean;
         "selectedKeys": string | string[];
         "resizable": boolean;
@@ -10903,7 +10975,8 @@ declare namespace LocalJSX {
         "icon": string;
         "label": string;
         "variant": 'primary' | 'secondary' | 'stroke';
-        "size": 'l' | 'm' | 's';
+        "size": 'xl' | 'l' | 'm' | 's';
+        "ariaLabelText": string;
         "disabled": boolean;
         "position": 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'none';
     }
@@ -10968,6 +11041,7 @@ declare namespace LocalJSX {
         "type": string;
         "name": string;
         "required": boolean;
+        "autoFocus": boolean;
         "autocomplete": string;
         "status": 'default' | 'error' | 'success' | 'warning' | 'info';
         "size": 's' | 'sm' | 'md' | 'lg';
@@ -11094,6 +11168,7 @@ declare namespace LocalJSX {
         "highlightMatches": boolean;
         "highlightTerm": string;
         "avatarShape": 'circle' | 'square';
+        "autoHighlight": boolean;
     }
     interface CoOverlayAttributes {
         "open": boolean;
@@ -11193,7 +11268,6 @@ declare namespace LocalJSX {
         "searchPlaceholder": string;
         "searchDebounce": number;
         "emptyMessage": string;
-        "createLabel": string;
         "showFooter": boolean;
         "footerPrimaryLabel": string;
         "footerSecondaryLabel": string;
@@ -11317,7 +11391,7 @@ declare namespace LocalJSX {
         "value": string;
         "selected": boolean;
         "size": 'large' | 'small';
-        "variant": 'pill' | 'underline';
+        "variant": 'pill' | 'underline' | 'segmented';
         "badge": string;
         "iconLeft": string;
         "iconRight": string;
@@ -11325,7 +11399,7 @@ declare namespace LocalJSX {
     }
     interface CoTabGroupAttributes {
         "value": string;
-        "variant": 'pill' | 'underline';
+        "variant": 'pill' | 'underline' | 'segmented';
     }
     interface CoTagsFieldAttributes {
         "value": string[] | string;
@@ -11535,6 +11609,10 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * Collapsible section. The caret button is the ONLY toggle trigger — clicking
+             * the header text does nothing (it may contain interactive content).
+             */
             "co-accordion": LocalJSX.IntrinsicElements["co-accordion"] & JSXBase.HTMLAttributes<HTMLCoAccordionElement>;
             /**
              * App Shell — Main application layout with navbar, sidebar, and content area.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prolibu-suite/cobalt-core",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Cobalt Design System — Framework-agnostic Web Components built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -50,10 +50,10 @@
     "@phosphor-icons/core": "^2.1.1",
     "dompurify": "^3.2.6",
     "overlayscrollbars": "^2.16.0",
+    "@prolibu-suite/cobalt-date-utils": "0.1.1",
+    "@prolibu-suite/cobalt-tokens": "0.2.0",
     "@prolibu-suite/cobalt-calendar-utils": "0.1.0",
-    "@prolibu-suite/cobalt-tokens": "0.1.1",
-    "@prolibu-suite/cobalt-rich-text": "0.1.2",
-    "@prolibu-suite/cobalt-date-utils": "0.1.1"
+    "@prolibu-suite/cobalt-rich-text": "0.1.2"
   },
   "devDependencies": {
     "@stencil/core": "^4.43.4",

package/dist/cjs/co-chip.cjs.entry.js

@@ -1,91 +0,0 @@
-'use strict';
-
-var index = require('./index-NNvye1ul.js');
-
-const coChipCss = () => `:host{display:inline-flex;max-width:var(--co-chip-max-width, none)}.co-chip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--co-font-family-primary);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;box-sizing:border-box;-webkit-font-smoothing:antialiased;max-width:100%;overflow:hidden;border:1px solid transparent;transition:background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;cursor:default;margin:0;padding:0}button.co-chip{cursor:pointer;outline:none}button.co-chip:focus-visible{box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-chip__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.co-chip__value{color:var(--co-chip-value-color, var(--co-color-gray-500, #888888))}.co-chip--filled{background:var(--co-chip-bg, var(--co-semantic-surface-muted));color:var(--co-chip-color, var(--co-semantic-text-default));border-color:var(--co-chip-border, transparent)}.co-chip--filled.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-color-opacity-negro-8, rgba(0, 0, 0, 0.08))}.co-chip--filled.co-chip--clickable:active:not(.co-chip--disabled){opacity:0.85}.co-chip--filled.co-chip--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary)}.co-chip--filled.co-chip--primary.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-primary);opacity:0.85}.co-chip--filled.co-chip--success{background:var(--co-semantic-status-success);color:#fff}.co-chip--filled.co-chip--error{background:var(--co-semantic-status-error);color:#fff}.co-chip--filled.co-chip--warning{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--info{background:var(--co-semantic-status-info);color:#fff}.co-chip--filled.co-chip--pending{background:var(--co-color-status-pending);color:#fff}.co-chip--filled.co-chip--progress{background:var(--co-color-status-progress);color:#fff}.co-chip--filled.co-chip--review{background:var(--co-color-status-review);color:#fff}.co-chip--filled.co-chip--submitted{background:var(--co-color-status-submitted);color:#fff}.co-chip--outlined{background:transparent;color:var(--co-semantic-text-default);border-color:var(--co-semantic-border-default)}.co-chip--outlined.co-chip--clickable:hover:not(.co-chip--disabled){background:var(--co-semantic-surface-hover)}.co-chip--outlined.co-chip--clickable:active:not(.co-chip--disabled){background:var(--co-semantic-surface-muted)}.co-chip--outlined.co-chip--primary{color:var(--co-semantic-surface-primary);border-color:var(--co-semantic-surface-primary)}.co-chip--outlined.co-chip--success{color:var(--co-semantic-status-success);border-color:var(--co-semantic-status-success)}.co-chip--outlined.co-chip--error{color:var(--co-semantic-status-error);border-color:var(--co-semantic-status-error)}.co-chip--outlined.co-chip--warning{color:var(--co-color-status-review);border-color:var(--co-color-status-review)}.co-chip--outlined.co-chip--info{color:var(--co-semantic-status-info);border-color:var(--co-semantic-status-info)}.co-chip--filled.co-chip--selected{box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.3)}.co-chip--outlined.co-chip--selected{background:var(--co-semantic-surface-muted);border-width:2px}.co-chip--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.co-chip--disabled{pointer-events:auto;}.co-chip--large{font-size:var(--co-font-size-12)}.co-chip--large.co-chip--icon-none{padding:var(--co-spacing-sm) var(--co-spacing-sm2);gap:0}.co-chip--large.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm2) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm2);gap:var(--co-spacing-sm)}.co-chip--large.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-sm)}.co-chip--small{font-size:var(--co-font-size-10)}.co-chip--small.co-chip--icon-none{padding:var(--co-spacing-xs) var(--co-spacing-sm);gap:0}.co-chip--small.co-chip--icon-left{padding:var(--co-spacing-xs) var(--co-spacing-sm) var(--co-spacing-xs) var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-right{padding:var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-xs) var(--co-spacing-sm);gap:var(--co-spacing-xs)}.co-chip--small.co-chip--icon-both{padding:var(--co-spacing-xs);gap:var(--co-spacing-xs)}.co-chip--rounded{border-radius:var(--co-border-radius-full)}.co-chip--square{border-radius:var(--co-spacing-sm)}.co-chip__icon-left,.co-chip__icon-right,.co-chip__dot,.co-chip__trailing{display:inline-flex;flex-shrink:0;align-items:center}.co-chip__trailing{color:var(--co-chip-trailing-color, currentColor)}.co-chip--large .co-chip__icon-left,.co-chip--large .co-chip__icon-right,.co-chip--large .co-chip__dot{width:16px;height:16px}.co-chip--small .co-chip__icon-left,.co-chip--small .co-chip__icon-right,.co-chip--small .co-chip__dot{width:10px;height:10px}.co-chip__remove{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;opacity:1;transition:opacity 0.1s ease;border:none;background:transparent;padding:0;color:inherit}.co-chip__remove:hover{opacity:0.7}.co-chip--large .co-chip__remove{width:16px;height:16px}.co-chip--small .co-chip__remove{width:10px;height:10px}::slotted(*){display:inline-flex;width:100%;height:100%}.co-chip.co-chip--filter{height:34px;padding:0 12px;gap:7px;font-size:13.5px;border-radius:var(--co-border-radius-full);background:var(--co-color-base-blanco, #fff);color:var(--co-color-base-negro, #1f1c1b);border-color:transparent;box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-16, rgba(0, 0, 0, 0.16))}.co-chip--filter .co-chip__icon-left{color:var(--co-color-gray-500, #888888)}.co-chip--filter .co-chip__trailing{color:var(--co-color-gray-400, #a0a0a0)}.co-chip--filter.co-chip--clickable:hover:not(.co-chip--disabled){box-shadow:inset 0 0 0 1px var(--co-color-opacity-negro-25, rgba(0, 0, 0, 0.25))}.co-chip--filter.co-chip--clickable:active:not(.co-chip--disabled){background:var(--co-color-gray-100, #f6f6f6)}.co-chip--filter.co-chip--selected{background:var(--co-color-gray-100, #f6f6f6)}`;
-
-const CoChip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.coRemove = index.createEvent(this, "coRemove", 7);
-        this.coClick = index.createEvent(this, "coClick", 7);
-        /** Shape: pill or straight corners */
-        this.shape = 'rounded';
-        /** Size: large (12px text), small (10px text) */
-        this.size = 'large';
-        /**
-         * Icon mode (for slot-based icons):
-         * - none    = no icon slots
-         * - left    = icon before label (Figma "1nd Icon")
-         * - both    = icon before + icon after (Figma "2nd Icon")
-         */
-        this.iconMode = 'none';
-        /** Visual variant.
-         *  - filled/outlined = existing tag/chip looks (unchanged defaults).
-         *  - filter = Cloud Drive filter-trigger pill (white pill, inset hairline
-         *    ring, tinted leading icon, two-tone value, trailing caret). */
-        this.variant = 'filled';
-        /** Semantic color */
-        this.color = 'default';
-        /** Icon weight applied to prop-based iconLeft / iconRight / trailingIcon. */
-        this.iconWeight = 'regular';
-        /** Show dismiss/remove button and emit coRemove on click. Reflected so it
-         *  survives lazy hydration when set via a framework wrapper. */
-        this.removable = false;
-        /** Show a leading colour dot (status/value colour). Reflected for hydration. */
-        this.dot = false;
-        /** Make the chip clickable (emits coClick) */
-        this.clickable = false;
-        /** Disabled state */
-        this.disabled = false;
-        /** Selected / active state */
-        this.selected = false;
-        this.handleClick = () => {
-            if (this.disabled)
-                return;
-            if (this.clickable)
-                this.coClick.emit();
-        };
-        this.handleRemove = (e) => {
-            e.stopPropagation();
-            if (this.disabled)
-                return;
-            this.coRemove.emit();
-        };
-    }
-    render() {
-        const hasLeftSlot = this.iconMode === 'left' || this.iconMode === 'both';
-        const hasRightSlot = this.iconMode === 'both' && !this.removable;
-        const iconSize = this.size === 'large' ? 16 : 10;
-        const removeIconSize = this.size === 'large' ? 16 : 10;
-        // Filter-variant trailing caret is a fixed 13px; otherwise match icon size.
-        const trailingIconSize = this.variant === 'filter' ? 13 : iconSize;
-        // Determine effective icon mode for CSS padding (the dot counts as a left icon).
-        const hasAnyLeft = hasLeftSlot || !!this.iconLeft || this.dot;
-        const hasAnyRight = hasRightSlot || !!this.iconRight || this.removable || !!this.trailingIcon;
-        let effectiveIconMode;
-        if (hasAnyLeft && hasAnyRight)
-            effectiveIconMode = 'both';
-        else if (hasAnyLeft)
-            effectiveIconMode = 'left';
-        else if (hasAnyRight)
-            effectiveIconMode = 'right';
-        else
-            effectiveIconMode = 'none';
-        const Tag = this.clickable ? 'button' : 'div';
-        return (index.h(Tag, { key: '2a0ec169b9c4ec0516d275d3787f7f02bcc4815f', class: {
-                'co-chip': true,
-                [`co-chip--${this.shape}`]: true,
-                [`co-chip--${this.size}`]: true,
-                [`co-chip--icon-${effectiveIconMode}`]: true,
-                [`co-chip--${this.variant}`]: true,
-                [`co-chip--${this.color}`]: this.color !== 'default',
-                'co-chip--clickable': this.clickable,
-                'co-chip--disabled': this.disabled,
-                'co-chip--selected': this.selected,
-            }, part: "chip", type: this.clickable ? 'button' : undefined, disabled: this.clickable ? this.disabled : undefined, onClick: this.handleClick }, this.dot && (index.h("span", { key: '43dac38d1aba1dead22ac164926167c38e66a9fe', class: "co-chip__dot", part: "dot", style: this.dotColor ? { color: this.dotColor } : undefined }, index.h("co-icon", { key: '3797d8f1081f82ed4f44bb99ffe26087b45c3d3a', name: "circle", size: iconSize, weight: "fill" }))), this.iconLeft && !hasLeftSlot && (index.h("span", { key: '742a11aaefce99a0bbf1c1bd6c2c3ca8b31d63cd', class: "co-chip__icon-left", part: "icon-left" }, index.h("co-icon", { key: 'a9f2c057d7df6e51f5be5c757e26280780fe1ae9', name: this.iconLeft, size: iconSize, weight: this.iconWeight }))), hasLeftSlot && (index.h("span", { key: 'c8f56d8525efb0a095f0c21d9cf0626964484510', class: "co-chip__icon-left", part: "icon-left" }, index.h("slot", { key: '01fb166b21b09cdb5b8b86dca1ec2a9fc57f6848', name: "icon-left" }))), index.h("span", { key: 'd6201c5dded49a5bdc32110d8e11165aeac99eac', class: "co-chip__label" }, index.h("slot", { key: 'd947e19d407485bcfcedd6eacc4af81c3059166b' }, this.label), this.valueLabel != null && this.valueLabel !== '' && (index.h("span", { key: '53108c759b51c53fa649776166396a9f609d20d0', class: "co-chip__value", part: "value" }, `: ${this.valueLabel}`))), this.iconRight && !hasRightSlot && !this.removable && (index.h("span", { key: '493961698dc761c41cf6a6e24d20e61701f594fa', class: "co-chip__icon-right", part: "icon-right" }, index.h("co-icon", { key: 'c9f198139af0e17dedd3464d9ccdd7b6c6163aff', name: this.iconRight, size: iconSize, weight: this.iconWeight }))), hasRightSlot && (index.h("span", { key: 'ab0224fdb675c1706cda2395f57ddf6f17160185', class: "co-chip__icon-right", part: "icon-right" }, index.h("slot", { key: '3e1a2cc6cde7a2834f9c872925aa4a2ee2136a9f', name: "icon-right" }))), this.removable && (index.h("span", { key: '4eb54aae2e81bf76bd99cf1ba808403de8f98d10', class: "co-chip__remove", part: "remove", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleRemove, "aria-label": "Remove" }, index.h("co-icon", { key: 'e9736b8d92d01df66a670a67e7ef05920c6a527b', name: "x-circle", size: removeIconSize, weight: "fill" }))), this.trailingIcon && (index.h("span", { key: 'd56053da1f81ebfbd276f314c08f0ca9d8b722c8', class: "co-chip__trailing", part: "trailing" }, index.h("co-icon", { key: 'f6cf7398888677b48622415b0d1e65f2117a841a', name: this.trailingIcon, size: trailingIconSize, weight: this.iconWeight })))));
-    }
-};
-CoChip.style = coChipCss();
-
-exports.co_chip = CoChip;