docs: traducao para o ingles

src/dom/css/README.md

@@ -1,19 +1,21 @@
-# Guia de Uso: Função `css`
+[🇧🇷 Leia em Português](./README.pt-BR.md) | [🇺🇸 Read in English](./README.md)
 
-A função `css` facilita a criação de folhas de estilo dinâmicas dentro de Web Components, utilizando template literals. Ela permite interpolar variáveis JavaScript diretamente no CSS, e é especialmente útil quando usada com o Shadow DOM e a API `adoptedStyleSheets`.
+# Usage Guide: `css` Function
 
-### Quando Usar
+The `css` function facilitates the creation of dynamic stylesheets within Web Components, using template literals. It allows for the interpolation of JavaScript variables directly into the CSS and is especially useful when used with the Shadow DOM and the `adoptedStyleSheets` API.
 
-- **Estilos Reativos**: Ideal para aplicar estilos que dependem de variáveis ou estados de componentes.
-- **Componentização com Shadow DOM**: A função gera folhas de estilo diretamente compatíveis com o Shadow DOM, proporcionando isolamento de estilo.
+### When to Use
 
-### Estrutura
+- **Reactive Styles**: Ideal for applying styles that depend on component variables or states.
+- **Componentization with Shadow DOM**: The function generates stylesheets that are directly compatible with the Shadow DOM, providing style isolation.
+
+### Structure
 
 ```javascript
 /**
- * @param {TemplateStringsArray} strings - As partes literais da string do template.
- * @param {...any} values - Os valores interpolados na string do template.
- * @returns {CSSStyleSheet[]} Um array contendo a folha de estilos gerada.
+ * @param {TemplateStringsArray} strings - The literal parts of the template string.
+ * @param {...any} values - The values interpolated into the template string.
+ * @returns {CSSStyleSheet[]} An array containing the generated stylesheet.
  */
 const css = (strings, ...values) => {
   const styleSheet = new CSSStyleSheet();
@@ -23,37 +25,37 @@ const css = (strings, ...values) => {
 };
 ```
 
-### Parâmetros
+### Parameters
 
 1. **strings**:
-   - **Tipo:** `TemplateStringsArray`
-   - **Descrição:** As partes literais da string de template CSS.
+   - **Type:** `TemplateStringsArray`
+   - **Description:** The literal parts of the CSS template string.
 
 2. **values**:
-   - **Tipo:** `any[]`
-   - **Descrição:** Os valores interpolados na string, que podem ser variáveis, expressões ou resultados de funções.
+   - **Type:** `any[]`
+   - **Description:** The interpolated values in the string, which can be variables, expressions, or function results.
 
-### Retorno
+### Return
 
-- **Tipo:** `CSSStyleSheet[]`
-- **Descrição:** Um array contendo uma ou mais folhas de estilo (`CSSStyleSheet`), que podem ser aplicadas diretamente ao componente com o Shadow DOM.
+- **Type:** `CSSStyleSheet[]`
+- **Description:** An array containing one or more stylesheets (`CSSStyleSheet`), which can be directly applied to the component with the Shadow DOM.
 
-### Exemplo Prático
+### Practical Example
 
-**Exemplo: Usando `@paint` e `css` para Gerar Estilos Dinâmicos**
+**Example: Using `@paint` and `css` to Generate Dynamic Styles**
 
 ```javascript
 import { define } from '@bake-js/-o-id';
 import { css, html, paint } from '@bake-js/-o-id/dom';
 
-// Função responsável por gerar o template HTML do componente
+// Function responsible for generating the component's HTML template
 function component() {
   return html`
-    <div>Meu Componente</div>
+    <div>My Component</div>
   `;
 }
 
-// Função que retorna a folha de estilo dinâmica com interpolação de variáveis
+// Function that returns the dynamic stylesheet with variable interpolation
 function style() {
   return css`
     :host {
@@ -64,7 +66,7 @@ function style() {
   `;
 }
 
-// Define o Web Component e associa o template e os estilos via @paint
+// Define the Web Component and associate the template and styles via @paint
 @define('my-component')
 @paint(component, style)
 class MyComponent extends HTMLElement {
@@ -77,20 +79,20 @@ class MyComponent extends HTMLElement {
 }
 ```
 
-### Explicação:
+### Explanation:
 
-- **Função `component()`**: Define o conteúdo HTML do componente, retornando o template via `html`.
-- **Função `style()`**: Retorna a folha de estilo gerada pela função `css`. As variáveis `backgroundColor` e `textColor` são interpoladas diretamente no CSS, permitindo que os estilos sejam dinâmicos e reativos.
-- **Decorador `@paint`**: Aplica o HTML e CSS ao componente, automatizando o processo de renderização e estilização.
-- **Uso de `@define`**: Define o Web Component nativo, conectando-o ao DOM.
+- **Function `component()`**: Defines the HTML content of the component, returning the template via `html`.
+- **Function `style()`**: Returns the stylesheet generated by the `css` function. The `backgroundColor` and `textColor` variables are interpolated directly into the CSS, allowing styles to be dynamic and reactive.
+- **Decorator `@paint`**: Applies the HTML and CSS to the component, automating the rendering and styling process.
+- **Usage of `@define`**: Defines the native Web Component, connecting it to the DOM.
 
-### Benefícios
+### Benefits
 
-1. **Simplicidade**: O uso do template literal para CSS elimina a necessidade de manipulação direta de strings.
-2. **Estilos Isolados**: A função `css` retorna folhas de estilo compatíveis com `adoptedStyleSheets`, facilitando a aplicação direta no Shadow DOM e evitando conflitos de estilo globais.
-3. **Interpolação de Variáveis**: Permite a inserção de variáveis e propriedades dinâmicas no CSS, adaptando-se a diferentes estados do componente.
+1. **Simplicity**: The use of template literals for CSS eliminates the need for direct string manipulation.
+2. **Isolated Styles**: The `css` function returns stylesheets compatible with `adoptedStyleSheets`, making it easier to apply directly to the Shadow DOM and avoid global style conflicts.
+3. **Variable Interpolation**: Allows for the insertion of variables and dynamic properties into the CSS, adapting to different component states.
 
-### Considerações Finais
+### Final Considerations
 
-- **Uso em Web Components**: A função foi desenhada para funcionar bem em ambientes que utilizam Shadow DOM e `adoptedStyleSheets`.
-- **Compatibilidade**: Certifique-se de verificar o suporte do navegador para `CSSStyleSheet` e `adoptedStyleSheets`.
+- **Use in Web Components**: The function was designed to work well in environments that utilize Shadow DOM and `adoptedStyleSheets`.
+- **Compatibility**: Make sure to check browser support for `CSSStyleSheet` and `adoptedStyleSheets`.

src/dom/css/README.pt-BR.md

@@ -0,0 +1,98 @@
+[🇧🇷 Leia em Português](./README.pt-BR.md) | [🇺🇸 Read in English](./README.md)
+
+# Guia de Uso: Função `css`
+
+A função `css` facilita a criação de folhas de estilo dinâmicas dentro de Web Components, utilizando template literals. Ela permite interpolar variáveis JavaScript diretamente no CSS, e é especialmente útil quando usada com o Shadow DOM e a API `adoptedStyleSheets`.
+
+### Quando Usar
+
+- **Estilos Reativos**: Ideal para aplicar estilos que dependem de variáveis ou estados de componentes.
+- **Componentização com Shadow DOM**: A função gera folhas de estilo diretamente compatíveis com o Shadow DOM, proporcionando isolamento de estilo.
+
+### Estrutura
+
+```javascript
+/**
+ * @param {TemplateStringsArray} strings - As partes literais da string do template.
+ * @param {...any} values - Os valores interpolados na string do template.
+ * @returns {CSSStyleSheet[]} Um array contendo a folha de estilos gerada.
+ */
+const css = (strings, ...values) => {
+  const styleSheet = new CSSStyleSheet();
+  const cssText = String.raw({ raw: strings }, ...values);
+  styleSheet.replaceSync(cssText);
+  return [styleSheet];
+};
+```
+
+### Parâmetros
+
+1. **strings**:
+   - **Tipo:** `TemplateStringsArray`
+   - **Descrição:** As partes literais da string de template CSS.
+
+2. **values**:
+   - **Tipo:** `any[]`
+   - **Descrição:** Os valores interpolados na string, que podem ser variáveis, expressões ou resultados de funções.
+
+### Retorno
+
+- **Tipo:** `CSSStyleSheet[]`
+- **Descrição:** Um array contendo uma ou mais folhas de estilo (`CSSStyleSheet`), que podem ser aplicadas diretamente ao componente com o Shadow DOM.
+
+### Exemplo Prático
+
+**Exemplo: Usando `@paint` e `css` para Gerar Estilos Dinâmicos**
+
+```javascript
+import { define } from '@bake-js/-o-id';
+import { css, html, paint } from '@bake-js/-o-id/dom';
+
+// Função responsável por gerar o template HTML do componente
+function component() {
+  return html`
+    <div>Meu Componente</div>
+  `;
+}
+
+// Função que retorna a folha de estilo dinâmica com interpolação de variáveis
+function style() {
+  return css`
+    :host {
+      display: block;
+      background-color: ${this.backgroundColor};
+      color: ${this.textColor};
+    }
+  `;
+}
+
+// Define o Web Component e associa o template e os estilos via @paint
+@define('my-component')
+@paint(component, style)
+class MyComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.backgroundColor = 'lightblue';
+    this.textColor = 'black';
+  }
+}
+```
+
+### Explicação:
+
+- **Função `component()`**: Define o conteúdo HTML do componente, retornando o template via `html`.
+- **Função `style()`**: Retorna a folha de estilo gerada pela função `css`. As variáveis `backgroundColor` e `textColor` são interpoladas diretamente no CSS, permitindo que os estilos sejam dinâmicos e reativos.
+- **Decorador `@paint`**: Aplica o HTML e CSS ao componente, automatizando o processo de renderização e estilização.
+- **Uso de `@define`**: Define o Web Component nativo, conectando-o ao DOM.
+
+### Benefícios
+
+1. **Simplicidade**: O uso do template literal para CSS elimina a necessidade de manipulação direta de strings.
+2. **Estilos Isolados**: A função `css` retorna folhas de estilo compatíveis com `adoptedStyleSheets`, facilitando a aplicação direta no Shadow DOM e evitando conflitos de estilo globais.
+3. **Interpolação de Variáveis**: Permite a inserção de variáveis e propriedades dinâmicas no CSS, adaptando-se a diferentes estados do componente.
+
+### Considerações Finais
+
+- **Uso em Web Components**: A função foi desenhada para funcionar bem em ambientes que utilizam Shadow DOM e `adoptedStyleSheets`.
+- **Compatibilidade**: Certifique-se de verificar o suporte do navegador para `CSSStyleSheet` e `adoptedStyleSheets`.

src/dom/didPaint/README.md

@@ -1,61 +1,63 @@
-# Guia de Uso: Decorator `didPaint`
+[🇧🇷 Leia em Português](./README.pt-BR.md) | [🇺🇸 Read in English](./README.md)
 
-O decorator `didPaint` fornece uma maneira eficaz de estender a lógica de um Custom Element logo após sua renderização. Ele permite que os desenvolvedores adicionem comportamentos personalizados sem modificar diretamente o fluxo de renderização do componente.
+# Usage Guide: `didPaint` Decorator
 
-### Quando Usar
+The `didPaint` decorator provides an effective way to extend the logic of a Custom Element right after its rendering. It allows developers to add custom behaviors without directly modifying the component's rendering flow.
 
-- **Personalização Pós-Renderização**: Ideal para situações em que é necessário executar lógica específica imediatamente após a renderização do componente.
-- **Gerenciamento de Estado**: Útil para atualizar o estado ou acionar eventos após a finalização do processo de renderização.
+### When to Use
 
-### Estrutura
+- **Post-Rendering Customization**: Ideal for situations where it's necessary to execute specific logic immediately after the component's rendering.
+- **State Management**: Useful for updating the state or triggering events after the rendering process is complete.
+
+### Structure
 
 ```javascript
 /**
- * @param {Object} target - O alvo do decorator, geralmente a classe do Custom Element.
- * @param {string} propertyKey - O nome do método decorado.
- * @returns {void} Um decorator que intercepta a chamada do `didPaintCallback`.
+ * @param {Object} target - The target of the decorator, usually the class of the Custom Element.
+ * @param {string} propertyKey - The name of the decorated method.
+ * @returns {void} A decorator that intercepts the call to `didPaintCallback`.
  */
 const didPaint = (target, propertyKey) => {
-  // Cria uma instância do interceptor para o método `didPaintCallback`.
+  // Creates an instance of the interceptor for the `didPaintCallback` method.
   const interceptor = intercept(didPaintCallback);
 
-  // Adiciona o método decorado à lista de callbacks a serem executados.
+  // Adds the decorated method to the list of callbacks to be executed.
   return interceptor
-    .in(target) // Define o alvo do interceptor.
-    .then(exec(propertyKey)); // Define o método a ser executado pelo interceptor.
+    .in(target) // Sets the target of the interceptor.
+    .then(exec(propertyKey)); // Sets the method to be executed by the interceptor.
 };
 
 export default didPaint;
 ```
 
-### Parâmetros
+### Parameters
 
 1. **target**:
-   - **Tipo:** `Object`
-   - **Descrição:** O alvo do decorator, que é geralmente a classe do Custom Element que contém o método a ser decorado.
+   - **Type:** `Object`
+   - **Description:** The target of the decorator, which is generally the class of the Custom Element that contains the method to be decorated.
 
 2. **propertyKey**:
-   - **Tipo:** `string`
-   - **Descrição:** O nome do método que será interceptado e decorado. Este método deve conter a lógica que será executada após a renderização do componente.
+   - **Type:** `string`
+   - **Description:** The name of the method that will be intercepted and decorated. This method should contain the logic that will be executed after the component's rendering.
 
-### Passos para Utilização
+### Steps for Usage
 
-1. **Importe o decorator `didPaint`**:
+1. **Import the `didPaint` decorator**:
 
    ```javascript
    import { didPaint } from '@bake-js/-o-id/dom';
    ```
 
-2. **Aplique o decorator ao método desejado**:
+2. **Apply the decorator to the desired method**:
 
-   - **Passo 1:** Crie um método na sua classe Custom Element que contenha a lógica que deve ser executada após a renderização.
-   - **Passo 2:** Decore o método com `@didPaint`.
+   - **Step 1:** Create a method in your Custom Element class that contains the logic to be executed after rendering.
+   - **Step 2:** Decorate the method with `@didPaint`.
 
-### Exemplo Prático
+### Practical Example
 
-**Exemplo: Lógica Pós-Renderização**
+**Example: Post-Rendering Logic**
 
-Aqui está um exemplo de como utilizar o `didPaint` para adicionar lógica ao ciclo de vida do componente após sua renderização:
+Here’s an example of how to use `didPaint` to add logic to the component's lifecycle after its rendering:
 
 ```javascript
 import { define } from '@bake-js/-o-id'
@@ -65,26 +67,26 @@ import { didPaint } from '@bake-js/-o-id/dom';
 class MyComponent extends HTMLElement {
   @didPaint
   handleDidPaint() {
-    console.log('O componente foi pintado!');
-    // Adicione lógica adicional aqui, como atualizações de estado ou interações.
+    console.log('The component has been painted!');
+    // Add additional logic here, such as state updates or interactions.
   }
 
   connectedCallback() {
-    // Simulação de renderização
-    this.innerHTML = `<p>Meu componente está renderizado!</p>`;
+    // Simulating rendering
+    this.innerHTML = `<p>My component is rendered!</p>`;
   }
 }
 ```
 
-**Explicação:**
-- O método `handleDidPaint` é chamado automaticamente após a renderização do componente, permitindo que a lógica de pós-renderização seja centralizada e mantida separada do restante do código do componente.
+**Explanation:**
+- The `handleDidPaint` method is automatically called after the component's rendering, allowing post-rendering logic to be centralized and kept separate from the rest of the component's code.
 
-### Benefícios do Decorator `didPaint`
+### Benefits of the `didPaint` Decorator
 
-1. **Extensibilidade**: Facilita a adição de lógica adicional ao ciclo de vida do componente sem a necessidade de alterar a estrutura existente.
-2. **Organização do Código**: Mantém o código do componente limpo e organizado, separando a lógica de renderização da lógica de pós-renderização.
-3. **Manutenção Facilitada**: Permite que mudanças na lógica de pós-renderização sejam feitas em um local específico, facilitando a manutenção do código a longo prazo.
+1. **Extensibility**: Facilitates the addition of additional logic to the component's lifecycle without needing to change the existing structure.
+2. **Code Organization**: Keeps the component's code clean and organized by separating rendering logic from post-rendering logic.
+3. **Easier Maintenance**: Allows changes to the post-rendering logic to be made in a specific location, making long-term code maintenance easier.
 
-### Considerações Finais
+### Final Considerations
 
-O decorator `didPaint` é uma ferramenta valiosa para desenvolvedores que desejam adicionar lógica personalizada ao ciclo de vida de seus Custom Elements, garantindo que a aplicação permaneça modular e de fácil manutenção.
+The `didPaint` decorator is a valuable tool for developers who want to add custom logic to the lifecycle of their Custom Elements, ensuring that the application remains modular and easy to maintain.