### Start Test Server

Source: https://github.com/zeixcom/le-truc/blob/main/examples/test-setup.md

Use this command to start the local test server for Le Truc examples. Ensure you have Bun installed.

```bash
# Start test server
bun run serve:examples
```

--------------------------------

### Development Server Commands

Source: https://github.com/zeixcom/le-truc/blob/main/server/SERVER.md

Use these commands to start the development server with HMR, serve pre-built content, build documentation or examples, and run various tests.

```bash
bun run dev              # Development server with HMR + file watching
bun run serve            # Serve pre-built content (no HMR)
bun run serve:docs       # Build docs, then serve
bun run serve:examples   # Build examples, then serve (Playwright-safe)
bun run build:docs       # One-shot docs build
bun run test             # Run all Playwright tests
bun run test:component <name>  # Run tests for a single component
bun run test:server      # Run server unit/integration tests
```

--------------------------------

### Build Examples for Testing

Source: https://github.com/zeixcom/le-truc/blob/main/examples/test-setup.md

Compile and build the examples for testing purposes. This step is often required before running tests that rely on built assets.

```bash
# Build examples for testing
bun run build:examples
```

--------------------------------

### Install Project Dependencies with Bun

Source: https://github.com/zeixcom/le-truc/blob/main/CONTRIBUTING.md

Use this command to install all necessary project dependencies. Le Truc utilizes Bun as its package manager and runtime.

```sh
bun install
```

--------------------------------

### Mouse Position Sensor Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/functions/createSensor.html

An example demonstrating how to create a sensor to track mouse coordinates using the createSensor function.

```APIDOC
### Example

ts

    const mousePos = createSensor<{ x: number; y: number }>((set) => {
      const handler = (e: MouseEvent) => {
        set({ x: e.clientX, y: e.clientY });
      };
      window.addEventListener('mousemove', handler);
      return () => window.removeEventListener('mousemove', handler);
    });
    

Copy
```

--------------------------------

### Basic Hello Component Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/components.md

This example demonstrates a complete Le Truc component, including HTML structure and JavaScript definition. It enhances an existing HTML structure to create a reactive greeting component.

```html
<basic-hello>
  <label>
    Your name<br />
    <input name="name" type="text" autocomplete="given-name" />
  </label>
  <p>Hello, <output>World</output>!</p>
</basic-hello>
```

```js
defineComponent('basic-hello', ({ expose, first, on, watch }) => {
  const input = first('input', 'Needed to enter the name.')
  const output = first('output', 'Needed to display the name.')
  const fallback = output.textContent || ''

  expose({ name: output.textContent ?? '' })

  return [
    on(input, 'input', () => ({ name: input.value || fallback })),
    watch('name', bindText(output)),
  ]
})
```

--------------------------------

### DOM Element Sensor Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/functions/createSensor.html

An example showing how to create a sensor to monitor a DOM element's attributes using createSensor and MutationObserver.

```APIDOC
### Example

ts

    import { createSensor, SKIP_EQUALITY } from 'cause-effect';
    
    const el = createSensor<HTMLElement>((set) => {
      const node = document.getElementById('box')!;
      set(node);
      const obs = new MutationObserver(() => set(node));
      obs.observe(node, { attributes: true });
      return () => obs.disconnect();
    }, { value: node, equals: SKIP_EQUALITY });
    

Copy
```

--------------------------------

### Basic Usage Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/functions/createState.html

Demonstrates the basic usage of createState to create and update a state variable.

```APIDOC
## createState Basic Usage

### Example
```ts
const count = createState(0);
count.set(1);
console.log(count.get()); // 1
```
```

--------------------------------

### Install Le Truc via Bun

Source: https://github.com/zeixcom/le-truc/blob/main/docs/getting-started.html

Install Le Truc using Bun if you are using Bun as your package manager. This is an alternative to npm for installing the library.

```sh
bun add @zeix/le-truc
```

--------------------------------

### Basic createEffect Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/functions/createEffect.html

Demonstrates the basic usage of createEffect to log changes in a state variable.

```APIDOC
## Example: Basic Usage

```ts
const count = createState(0);
const dispose = createEffect(() => {
  console.log('Count is:', count.get());
});

count.set(1); // Logs: "Count is: 1"
dispose(); // Stop the effect
```
```

--------------------------------

### Conventional Commit Message Examples

Source: https://github.com/zeixcom/le-truc/blob/main/CONTRIBUTING.md

Examples demonstrating the conventional commit format for clear and structured commit history. This format aids in automated changelog generation.

```txt
feat(ui): add new LazyLoad component
```

```txt
*fix(scheduler): resolve timing issue on initial load
```

```txt
docs: update documentation for Context API
```

--------------------------------

### Default Tab Group Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/module-tabgroup.html

Demonstrates the default initial state of the tab group with the first tab selected.

```html
<module-tabgroup>
		<div role="tablist" aria-label="Tabs">
			<button
				type="button"
				role="tab"
				id="trigger1"
				aria-controls="panel1"
				aria-selected="true"
				tabindex="0"
			>
				Tab 1
			</button>
			<button
				type="button"
				role="tab"
				id="trigger2"
				aria-controls="panel2"
				aria-selected="false"
				tabindex="-1"
			>
				Tab 2
			</button>
			<button
				type="button"
				role="tab"
				id="trigger3"
				aria-controls="panel3"
				aria-selected="false"
				tabindex="-1"
			>
				Tab 3
			</button>
		</div>
		<div role="tabpanel" id="panel1" aria-labelledby="trigger1">
			Tab 1 content
		</div>
		<div role="tabpanel" id="panel2" aria-labelledby="trigger2" hidden>
			Tab 2 content
		</div>
		<div role="tabpanel" id="panel3" aria-labelledby="trigger3" hidden>
			Tab 3 content
		</div>
	</module-tabgroup>
```

--------------------------------

### Multiple Instances Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/basic-pluralize.html

This example shows two separate instances of the basic-pluralize component. The first instance handles 'items' with a count of 0, displaying 'No items'.

```html
<p>Number of items:</p>
<basic-pluralize id="pluralize-1" count="0">
	<p class="none">No items</p>
	<p class="some">
		<span class="count"></span> item<span class="other">s</span>
	</p>
</basic-pluralize>
```

--------------------------------

### createEffect with Cleanup Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/functions/createEffect.html

Illustrates how to use a cleanup function with createEffect to manage resources like timers.

```APIDOC
## Example: With Cleanup

```ts
// With cleanup
createEffect(() => {
  const timer = setInterval(() => console.log(count.get()), 1000);
  return () => clearInterval(timer);
});
```
```

--------------------------------

### createMemo Usage Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/functions/createMemo.html

Demonstrates how to use the createMemo function to create a memoized value that updates based on a state change.

```APIDOC
## Example Usage

```typescript
const count = createState(0);
const doubled = createMemo(() => count.get() * 2);

console.log(doubled.get()); // 0
count.set(5);
console.log(doubled.get()); // 10
```

## Example with Previous Value

```typescript
// Using previous value
const sum = createMemo((prev) => prev + count.get(), { value: 0, equals: Object.is });
```
```

--------------------------------

### createTask Usage Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/functions/createTask.html

Demonstrates how to use the createTask function to create a reactive computation and check its pending state.

```APIDOC
### Examples

ts

    const userId = createState(1);
    const user = createTask(async (prev, signal) => {
      const response = await fetch(`/api/users/${userId.get()}`, { signal });
      return response.json();
    });
    
    // When userId changes, the previous fetch is aborted
    userId.set(2);
    

ts

    // Check pending state
    if (user.isPending()) {
      console.log('Loading...');
    }
    
```

--------------------------------

### Install Le Truc with npm or bun

Source: https://github.com/zeixcom/le-truc/blob/main/README.md

Use npm or bun to add the Le Truc package to your project.

```bash
npm install @zeix/le-truc
# or
bun add @zeix/le-truc
```

--------------------------------

### Default Basic Button

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/basic-button.html

This is the default example of the basic-button component. It shows the initial state and how dynamic updates might appear.

```html
<basic-button>
						<button type="button">
							<span class="label">🛒 Shopping Cart</span>
							<span class="badge">5</span>
						</button>
					</basic-button>
```

--------------------------------

### Usage with Type Guard Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/functions/createState.html

Shows how to use createState with a type guard for enhanced type safety.

```APIDOC
## createState with Type Guard

### Example
```ts
// With type guard
const count = createState(0, {
  guard: (v): v is number => typeof v === 'number'
});
```
```

--------------------------------

### Basic HTML Structure

Source: https://github.com/zeixcom/le-truc/blob/main/docs/getting-started.md

An example of standard HTML for a greeting and an input field, functional without JavaScript.

```html
<label>
  Your name<br />
  <input name="name" type="text" autocomplete="given-name" />
</label>
<p>Hello, <output>World</output>!</p>
```

--------------------------------

### Missing Unit for Unit Style

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/basic-number.html

Demonstrates error handling when 'style' is 'unit' but no 'unit' option is provided. This example logs a console error.

```html
<basic-number
		id="missing-unit-html"
		value="500"
		options='{"style":"unit"}'
	></basic-number>
```

--------------------------------

### Card Callout with Tip Class

Source: https://github.com/zeixcom/le-truc/blob/main/examples/card/callout/card-callout.md

Example of a helpful tip Card Callout. Use the 'tip' class for this style.

```html
<div class="card callout tip">
  {{ content }}
</div>
```

--------------------------------

### Missing Currency for Currency Style

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/basic-number.html

Demonstrates error handling when 'style' is 'currency' but no 'currency' option is provided. This example logs a console error.

```html
<basic-number
		id="missing-currency-html"
		value="1000"
		options='{"style":"currency"}'
	></basic-number>
```

--------------------------------

### Fragment Request Header Example

Source: https://github.com/zeixcom/le-truc/blob/main/SERVER_STRATEGIES.md

Use the 'X-Fragment' header to signal to the server that an HTML fragment is desired instead of a full page.

```http
GET /docs/guide HTTP/1.1
X-Fragment: true
```

--------------------------------

### Start Development Server for Docs with Bun

Source: https://github.com/zeixcom/le-truc/blob/main/CONTRIBUTING.md

Launch a local development server to preview the project's documentation. This allows for live updates as documentation files are modified.

```sh
bun run serve:docs
```

--------------------------------

### Define Component with Four Arguments

Source: https://github.com/zeixcom/le-truc/blob/main/docs/blog/2026-04-04-four-arguments-for-four-guarantees.html

This example demonstrates the typical usage of defineComponent with its four arguments: custom element name, reactive properties, DOM query function, and effect setup function. Use this when defining a new custom element with Le Truc.

```typescript
defineComponent(
      'form-checkbox',
      {
        checked: read(ui => ui.checkbox.checked, false),
        label: asString(({ host, label }) =>
          label?.textContent ?? host.querySelector('label')?.textContent ?? ''),
      },
      ({ first }) => ({
        checkbox: first('input[type="checkbox"]', 'Add a native checkbox.'),
        label: first('.label'),
      }),
      ({ checkbox }) => ({
        host: toggleAttribute('checked'),
        checkbox: [
          on('change', () => ({ checked: checkbox.checked })),
          setProperty('checked'),
        ],
        label: setText('label'),
      }),
    )
```

--------------------------------

### Basic Hello World Component

Source: https://github.com/zeixcom/le-truc/blob/main/examples/basic/hello/basic-hello.md

This HTML file defines a basic Le Truc component that greets the user by name. It uses `asString()` to bind the input field's value to the `name` property, `on('input')` to update the `host.name` reactively, and `setText()` to display the greeting. The setup function directly queries the input and output elements.

```html
<le-truc>
  <input type="text" placeholder="Enter your name" />
  <output></output>

  <script type="module">
    import {{ LeTruc }} from 'le-truc';

    LeTruc.define('basic-hello', class extends HTMLElement {
      static props = {
        name: String
      };

      setup() {
        const input = this.first('input');
        const output = this.first('output');

        this.asString(input, 'value', 'name');
        this.on('input', input, 'value', 'name');
        this.setText(output, 'textContent', 'name', name => `Hello, ${name}!`);
      }
    });
  </script>
</le-truc>
```

--------------------------------

### Empty Scrollarea Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/module-scrollarea.html

An example of an empty scrollarea component. It is styled with dimensions and a border.

```html
<module-scrollarea id="empty-scrollarea"></module-scrollarea>

<style>
	#empty-scrollarea {
		height: 200px;
		width: 300px;
		border: 1px solid #ccc;
		margin: 20px;
	}
</style>
```

--------------------------------

### get()

Source: https://github.com/zeixcom/le-truc/blob/main/docs/type-aliases/State.html

Gets the current value of the state. When called inside a memo, task, or effect, creates a dependency.

```APIDOC
## Method: get()

> **get**(): `T`

Gets the current value of the state. When called inside a memo, task, or effect, creates a dependency.

### Returns

*   `T` - The current value
```

--------------------------------

### Upgrade Lifecycle Stages

Source: https://github.com/zeixcom/le-truc/blob/main/docs/getting-started.md

Illustrates the sequence of events from HTML parsing to JavaScript loading and component effects.

```text
HTML is parsed → content is visible to user
JS loads → component connects → effects run
```

--------------------------------

### get()

Source: https://github.com/zeixcom/le-truc/blob/main/docs/api/type-aliases/Sensor.html

Gets the current value of the sensor. When called inside another reactive context, it creates a dependency.

```APIDOC
## Method: get()

> **get**(): `T`
> 
> Defined in: node_modules/@zeix/cause-effect/types/src/nodes/sensor.d.ts:15

Gets the current value of the sensor. When called inside another reactive context, creates a dependency.

### Returns

- `T` - The sensor value

### Throws

- UnsetSignalValueError - If the sensor value is still unset when read.
```

--------------------------------

### Build the Project with Bun

Source: https://github.com/zeixcom/le-truc/blob/main/CONTRIBUTING.md

Compile and bundle the project for production or distribution. This command generates the necessary build artifacts.

```sh
bun run build
```

--------------------------------

### Ordinal Number Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/basic-pluralize.html

This example demonstrates ordinal number formatting using the 'ordinal' attribute. The 'count' is set to 1, and the component will display '1st'.

```html
<p>Item selected (ordinal number):</p>
<basic-pluralize id="ordinal-test" count="1" ordinal>
	<p class="none">None</p>
	<p class="some">
		<span class="count"></span><span class="one">st</span
		><span class="two">nd</span><span class="few">rd</span
		><span class="other">th</span>
	</p>
</basic-pluralize>
```

--------------------------------

### Install Le Truc via npm

Source: https://github.com/zeixcom/le-truc/blob/main/docs/getting-started.html

Install Le Truc using npm if you are using a bundler. This allows for better integration with modern frontend workflows.

```sh
npm install @zeix/le-truc
```

--------------------------------

### Nested Card Component Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/test/module-lazyload/mocks/nested-components.html

Illustrates a card-callout component nested within lazy-loaded content. This example is primarily for visual demonstration and testing initialization order.

```html
💐 42 Your name 

Hello,

World

!
```

--------------------------------

### Blog Post Directory Structure

Source: https://github.com/zeixcom/le-truc/blob/main/server/SERVER.md

Illustrates the recommended file organization for blog posts and their corresponding build outputs.

```text
docs-src/pages/blog/          ← blog post markdown files
  YYYY-MM-DD-slug.md          ← recommended naming (date prefix enables natural sorting)

docs-src/pages/blog.md        ← blog index page (frontmatter authored; body generated)

docs/blog/                    ← build output (individual post HTML files)
docs/blog.html                ← build output (overview page)
```

--------------------------------

### Default Pluralization Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/basic-pluralize.html

This example shows the default behavior of the basic-pluralize component for displaying remaining tasks. It uses the 'count' attribute to determine which text to show.

```html
<p>Remaining tasks:</p>
<basic-pluralize>
	<p class="none">Well done, all done!</p>
	<p class="some">
		<span class="count"></span>
		task<span class="other">s</span>
		remaining
	</p>
</basic-pluralize>
```

--------------------------------

### Irregular Plural Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/basic-pluralize.html

This example demonstrates handling irregular plurals, specifically 'criterion' vs 'criteria'. The 'count' is set to 5, and the component will display '5 criteria'.

```html
<p>Number of filter criteria (irregular plural):</p>
<basic-pluralize id="pluralize-2" count="5">
	<p class="none">No filters</p>
	<p class="some">
		<span class="count"></span>
		filter criteri<span class="one">on</span><span class="other">a</span>
	</p>
</basic-pluralize>
```

--------------------------------

### Full Example: ModuleCatalog with FormSpinbuttons and BasicButton

Source: https://github.com/zeixcom/le-truc/blob/main/docs/data-flow.md

This HTML structure shows a ModuleCatalog that contains multiple FormSpinbuttons for products and a BasicButton to display the total count. The state flows from individual FormSpinbuttons up to the ModuleCatalog, which then updates the BasicButton.

```html
<module-catalog>
  <header>
    <p>Shop</p>
    <basic-button disabled>
      <button type="button" disabled>
        <span class="label">🛒 Shopping Cart</span>
        <span class="badge"></span>
      </button>
    </basic-button>
  </header>
  <ul>
    <li>
      <p>Product 1</p>
      <form-spinbutton>
        <button type="button" class="decrement" aria-label="Decrement" hidden>
          −
        </button>
        <input
          type="number"
          class="value"
          name="amount-product1"
          value="0"
          min="0"
          max="10"
          readonly
          disabled
          hidden
        >
        <button type="button" class="increment" aria-label="Increment">
          <span class="zero">Add to Cart</span>
          <span class="other" hidden>+</span>
        </button>
      </form-spinbutton>
    </li>
    <li>
      <p>Product 2</p>
      <form-spinbutton>
        <button type="button" class="decrement" aria-label="Decrement" hidden>
          −
        </button>
        <input
          type="number"
          class="value"
          name="amount-product2"
          value="0"
          min="0"
          max="5"
          readonly
          disabled
          hidden
        >
        <button type="button" class="increment" aria-label="Increment">
          <span class="zero">Add to Cart</span>
          <span class="other" hidden>+</span>
        </button>
      </form-spinbutton>
    </li>
    <li>
      <p>Product 3</p>
      <form-spinbutton>
        <button type="button" class="decrement" aria-label="Decrement" hidden>
          −
        </button>
        <input
          type="number"
          class="value"
          name="amount-product3"
          value="0"
          min="0"
          max="20"
          readonly
          disabled
          hidden
        >
        <button type="button" class="increment" aria-label="Increment">
          <span class="zero">Add to Cart</span>
          <span class="other" hidden>+</span>
        </button>
      </form-spinbutton>
    </li>
  </ul>
</module-catalog>
```

--------------------------------

### Basic Module Loading

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/module-lazyload.html

Demonstrates the default behavior of loading content from a specified HTML source. Includes placeholders for loading and error states.

```html
<module-lazyload src="./test/module-lazyload/mocks/simple-text.html">
						<card-callout>
							<p class="loading" role="status">Loading...</p>
							<p class="error" role="alert" aria-live="assertive" hidden></p>
						</card-callout>
						<div class="content" hidden></div>
					</module-lazyload>
```

--------------------------------

### Plural Categories Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/basic-pluralize.html

This example demonstrates how basic-pluralize handles different plural categories for 'person' vs 'people'. The 'count' attribute is set to 1, and the component will display '1 person'.

```html
<p>Number of people:</p>
<basic-pluralize id="plural-test" count="1">
	<p class="none">Nobody</p>
	<p class="some">
		<span class="count"></span> <span class="one">person</span
		><span class="other">people</span>
	</p>
</basic-pluralize>
```

--------------------------------

### HTML Usage of Context Provider

Source: https://github.com/zeixcom/le-truc/blob/main/docs/data-flow.md

Demonstrates how to wrap an application or a section with the `context-media` provider component to make shared state available to nested components.

```html
<context-media>
  <!-- Arbitrarily nested HTML with one or many context consumers -->
  <main>
    <card-mediaqueries>
      <dl>
        <dt>Motion Preference:</dt>
         <dd class="motion"></dd>
        <dt>Theme Preference:</dt>
        <dd class="theme"></dd>
      </dl>
    </card-mediaqueries>
  </main>
</context-media>
```

--------------------------------

### Signal.get()

Source: https://github.com/zeixcom/le-truc/blob/main/docs-src/api/type-aliases/Signal.md

The get() method retrieves the value held by the Signal.

```APIDOC
## Signal.get()

### Description
Retrieves the value of type `T` stored within the Signal.

### Method
get

### Returns
`T` - The value held by the Signal.
```

--------------------------------

### FAQ Schema Example

Source: https://github.com/zeixcom/le-truc/blob/main/server/SERVER.md

Illustrates a potential Markdoc schema for creating collapsible FAQ sections using custom tags or native HTML elements.

```markdoc
{% faq %}
{% question %}
  Question 1
{% endquestion %}
  Answer 1
{% endfaq %}
```

--------------------------------

### defineComponent

Source: https://github.com/zeixcom/le-truc/blob/main/docs/functions/defineComponent.html

Defines a component with dependency resolution and a setup function (connectedCallback).

```APIDOC
## Function: defineComponent()

> **defineComponent**<`P`, `U`

> (`name`: `string`, `props?`: [`Initializers`](../type-aliases/Initializers.html)<`P`, `U`

> , `select?`: (`elementQueries`) => `U`

> , `setup?`: (`ui`) => [`Effects`](../type-aliases/Effects.html)<`P`, [`ComponentUI`](../type-aliases/ComponentUI.html)<`P`, `U`

> >): [`Component`](../type-aliases/Component.html)<`P`

### Description
Define a component with dependency resolution and setup function (connectedCallback)

### Parameters
#### Parameters
- **name** (`string`) - Custom element name
- **props?** ([`Initializers`](../type-aliases/Initializers.html)<`P`, `U`

> ) - Component properties
- **select?** (`elementQueries`) => `U` - Function to select UI elements
- **setup?** (`ui`) => [`Effects`](../type-aliases/Effects.html)<`P`, [`ComponentUI`](../type-aliases/ComponentUI.html)<`P`, `U`

> - Setup function

### Returns
- [`Component`](../type-aliases/Component.html)<`P`

### Throws
- If component name is invalid
- If property name is invalid
```

--------------------------------

### Vertical Scrollarea Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/module-scrollarea.html

A basic vertical scrollarea with content that does not overflow. It is styled with a border and margin.

```html
<module-scrollarea id="no-overflow-vertical">
	<div>
		<p>Short content that doesn't overflow.</p>
	</div>
</module-scrollarea>

<style>
	#no-overflow-vertical {
		height: 200px;
		width: 300px;
		border: 1px solid #ccc;
		margin: 20px;
	}
</style>
```

--------------------------------

### Define a Basic Reactive Component

Source: https://github.com/zeixcom/le-truc/blob/main/docs/getting-started.md

Use `defineComponent` to create a reactive component. This example sets up input binding and text updates for a greeting. Ensure the script is of type module.

```html
<script type="module">
  import {
    bindText,
    defineComponent,
  } from 'https://cdn.jsdelivr.net/npm/@zeix/le-truc@latest/index.js'

  defineComponent('basic-hello', ({ expose, first, on, watch }) => {
    const input = first('input', 'Needed to enter the name.')
    const output = first('output', 'Needed to display the name.')
    const fallback = output.textContent || ''

    expose({ name: output.textContent ?? '' })

    return [
      on(input, 'input', () => ({ name: input.value || fallback })),
      watch('name', bindText(output)),
    ]
  })
</script>
```

--------------------------------

### Full Shopping Cart Example

Source: https://github.com/zeixcom/le-truc/blob/main/docs-src/pages/data-flow.md

This HTML structure demonstrates a complete shopping cart flow. It includes a catalog that sums quantities from multiple spinbuttons and displays the total in a basic button. No custom events are needed as state flows naturally.

```html
<module-catalog>
  <header>
    <p>Shop</p>
    <basic-button disabled>
      <button type="button" disabled>
        <span class="label">🛒 Shopping Cart</span>
        <span class="badge"></span>
      </button>
    </basic-button>
  </header>
  <ul>
    <li>
      <p>Product 1</p>
      <form-spinbutton>
        <button type="button" class="decrement" aria-label="Decrement" hidden>
          −
        </button>
        <input
          type="number"
          class="value"
          name="amount-product1"
          value="0"
          min="0"
          max="10"
          readonly
          disabled
          hidden
        >
        <button type="button" class="increment" aria-label="Increment">
          <span class="zero">Add to Cart</span>
          <span class="other" hidden>
            +
          </span>
        </button>
      </form-spinbutton>
    </li>
    <li>
      <p>Product 2</p>
      <form-spinbutton>
        <button type="button" class="decrement" aria-label="Decrement" hidden>
          −
        </button>
        <input
          type="number"
          class="value"
          name="amount-product2"
          value="0"
          min="0"
          max="5"
          readonly
          disabled
          hidden
        >
        <button type="button" class="increment" aria-label="Increment">
          <span class="zero">Add to Cart</span>
          <span class="other" hidden>
            +
          </span>
        </button>
      </form-spinbutton>
    </li>
    <li>
      <p>Product 3</p>
      <form-spinbutton>
        <button type="button" class="decrement" aria-label="Decrement" hidden>
          −
        </button>
        <input
          type="number"
          class="value"
          name="amount-product3"
          value="0"
          min="0"
          max="20"
          readonly
          disabled
          hidden
        >
        <button type="button" class="increment" aria-label="Increment">
          <span class="zero">Add to Cart</span>
          <span class="other" hidden>
            +
          </span>
        </button>
      </form-spinbutton>
    </li>
  </ul>
</module-catalog>
```

--------------------------------

### Card Callout with Caution Class

Source: https://github.com/zeixcom/le-truc/blob/main/examples/card/callout/card-callout.md

Example of a warning Card Callout. The 'caution' class is used for this style.

```html
<div class="card callout caution">
  {{ content }}
</div>
```

--------------------------------

### Basic Pluralize Component Setup

Source: https://github.com/zeixcom/le-truc/blob/main/examples/basic/pluralize/basic-pluralize.md

Demonstrates setting up effects for plural categories dynamically based on locale. Effects are plain JavaScript values that can be composed programmatically.

```javascript
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { plural } from '@lit/reactive-element/directives/plural.js';
import { localize } from '@lit/localize';

const messages = {
    en: {
        count: {
            '=0': 'No items',
            '=1': 'One item',
            other: 'Some items'
        }
    }
};

@localize({ messages })
export class BasicPluralize extends LitElement {
    static styles = css`
        :host {
            display: block;
        }
        .hidden {
            display: none;
        }
    `;

    @property({ type: Number })
    count = 0;

    @property({ type: String })
    lang = 'en';

    @property({ type: Boolean })
    ordinal = false;

    render() {
        return html`
            <p>
                ${plural(this.count, {
                    // @ts-ignore
                    locale: this.lang,
                    // @ts-ignore
                    type: this.ordinal ? 'ordinal' : 'cardinal'
                })}
            </p>
        `;
    }
}

customElements.define('basic-pluralize', BasicPluralize);
```

--------------------------------

### Tab Group Property Test

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/module-tabgroup.html

Example for testing programmatic property changes on the tab group component.

```html
<module-tabgroup id="property-test">
		<div role="tablist" aria-label="Tabs">
			<button
				type="button"
				role="tab"
				id="trigger12"
				aria-controls="panel12"
				aria-selected="true"
				tabindex="0"
			>
				First
			</button>
			<button
				type="button"
				role="tab"
				id="trigger13"
				aria-controls="panel13"
				aria-selected="false"
				tabindex="-1"
			>
				Second
			</button>
			<button
				type="button"
				role="tab"
				id="trigger14"
				aria-controls="panel14"
				aria-selected="false"
				tabindex="-1"
			>
				Third
			</button>
		</div>
		<div role="tabpanel" id="panel12" aria-labelledby="trigger12">
			First panel content
		</div>
```

--------------------------------

### Multiple Increment Test Counter

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/basic-counter.html

An example of a basic-counter component used for testing multiple increment interactions.

```html
<basic-counter id="multiple-increment-test">
		<button type="button">Click me! <span>42</span></button>
	</basic-counter>
```

--------------------------------

### Initialize Todo List and State

Source: https://github.com/zeixcom/le-truc/blob/main/docs/sources/module-todo.html

Sets up the initial state for a todo list, including creating a reactive list, memoized counts for active and completed items, and a state for live region updates. This is typically used at the component's initialization.

```typescript
const list = createList<TodoItem, Store<TodoItem>>([], {
			keyConfig: item => item.id,
			createItem: createStore,
		})

		const completedCount = createMemo(
			() => list.get().filter(item => item.completed).length,
		)
		const activeCount = createMemo(() => list.length - completedCount.get())
		const status = createState(liveRegion.textContent)
```

--------------------------------

### HTML Structure for Context Consumption

Source: https://github.com/zeixcom/le-truc/blob/main/docs/data-flow.md

This HTML sets up the necessary structure for the context-media provider and the card-mediaqueries consumer component, including elements to display context values.

```html
<context-media>
  <card-mediaqueries>
    <dl>
      <dt>Motion Preference:</dt>
      <dd class="motion"></dd>
      <dt>Theme Preference:</dt>
      <dd class="theme"></dd>
      <dt>Device Viewport:</dt>
      <dd class="viewport"></dd>
      <dt>Device Orientation:</dt>
      <dd class="orientation"></dd>
    </dl>
  </card-mediaqueries>
</context-media>

```