Conectate Components (ct-components)

Conectate Components is a library of web components published as @conectate/components. Use this skill when building UIs with Lit, Vue, or React and the project uses or should use these components.

Installation

pnpm i @conectate/components
# or
npm i @conectate/components

Base class CtLit

For Lit-based components, extend CtLit instead of LitElement to get utilities:

import { CtLit, customElement, html } from "@conectate/components/ct-lit.js";

@customElement("my-component")
class MyComponent extends CtLit {
  render() {
    return html`<div>My component</div>`;
  }
}

• $$(selector) — first match in shadow root. $$$(selector) — all matches.
• fire(name, detail) — dispatch custom event with detail.
• scrollToY(scrollTargetY, time?, easing?, target?) — animated scroll.
• deepClone(object) — deep clone (structuredClone or JSON fallback).

Full API: examples/ct-lit.md.

Imports

Always import the component script before use. One import per component:

import "@conectate/components/ct-button";
import "@conectate/components/ct-input";
import "@conectate/components/ct-dialog";

Path pattern: @conectate/components/<component-name>.

Components (overview)

Use each tag only after importing its script. For full props, slots, and CSS variables, see the linked docs.

More components and containers: reference.md.

Uso con Lit / Vue / React

• Lit: Import the component .js, then use the tag. Bind with .property=${value}, events with @eventname=${handler}. For custom events, e.detail holds the payload.
• Vue: Import the component .js. Use v-model where supported (e.g. ct-input, ct-select). Events: @value, @input, etc.
• React: Import the component .js. Use onClick, onChange, onValue (for custom events, e.detail). Declare JSX types for ct-* if needed (see docs examples).

Minimal examples

Lit (ct-button):

import { LitElement, html } from "lit";
import "@conectate/components/ct-button.js";

class MyEl extends LitElement {
  render() {
    return html`<ct-button raised @click=${() => console.log("ok")}>Click</ct-button>`;
  }
}

Vue (ct-input):

<template>
	<ct-input label="Name" v-model="name" />
</template>
<script setup>
import "@conectate/components/ct-input.js";
import { ref } from "vue";
const name = ref("");
</script>

React (ct-select):

import "@conectate/components/ct-select.js";

<ct-select label="Choice" items={items} value={val} onValue={(e) => setVal(e.detail.value)} />

For full examples per component, see examples/ (e.g. ct-button.md, ct-input.md).

Slots

Many components use default, prefix, and suffix slots. Check each component’s doc for exact slot names and behavior.

<ct-button raised>
	<span slot="prefix">↑</span>
	Label
	<span slot="suffix">↓</span>
</ct-button>

CSS variables

Components are themed via CSS custom properties (e.g. --color-primary, --border-radius, --ct-button-radius). Set them on the host, a wrapper, or :root. See each component’s doc for the full list.

ct-button {
	--color-primary: #00aeff;
	--ct-button-radius: 26px;
}

Eventos

• Native events: click, input, change, blur, etc. Use as in standard HTML.
• Custom events carry data in event.detail. Example: ct-select fires value with detail.value (and detail.old). In Lit: @value=${(e) => this.value = e.detail.value}.

For event names and payloads per component, see the corresponding doc in examples/ or reference.md.

Resources

Index of components and their documentation. All paths are relative to this skill (e.g. examples/ct-button.md).

For usage patterns, props, slots, CSS variables, and events, open the linked doc for each component.