### Setting Up Theming in Xel

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This guide explains how to set up theming for Xel applications. It directs users to the configuration documentation for theme setup, the main Xel singleton for theme properties, and the index file for a complete initialization example.

```markdown
1. Read: [configuration.md](configuration.md) → Theme Configuration
2. Reference: [xel-main.md](api-reference/xel-main.md) → theme property
3. Examples: [index.md](index.md) → Complete Initialization Example
```

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

### Creating Modal Dialogs with Xel

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This guide outlines the steps for creating modal dialogs using Xel. It references the x-dialog component documentation, its usage examples, and the relevant section in the quick-reference guide.

```markdown
1. Reference: [x-dialog.md](api-reference/x-dialog.md)
2. Examples: [x-dialog.md](api-reference/x-dialog.md) → Usage Examples
3. Reference: [quick-reference.md](quick-reference.md) → Dialog section
```

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

### Basic Usage Example for XSelectElement

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-select.md

A fundamental example showing how to select an item and listen for the 'change' event to update the UI.

```javascript
const select = document.querySelector("x-select");

select.addEventListener("change", (event) => {
  const value = select.value;
  console.log("Selected:", value);
  
  // Update UI based on selection
  updatePreview(value);
});
```

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

### Building a Form with Xel Components

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This snippet outlines the steps to build a form using Xel components, starting with the main index file and progressing to specific form controls like inputs, checkboxes, and buttons. It also references the quick-reference guide for validation patterns.

```markdown
1. Start with: [index.md](index.md) → Getting Started
2. Use: [x-input.md](api-reference/x-input.md) for text fields
3. Add: [x-checkbox.md](api-reference/x-checkbox.md) or [x-switch.md](api-reference/x-switch.md)
4. Add: [x-button.md](api-reference/x-button.md) for submit
5. Reference: [quick-reference.md](quick-reference.md) for validation patterns
```

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

### Basic Tabs Usage Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-tabs.md

A complete example demonstrating how to set up `<x-tabs>` and `<x-tab>` elements, handle the `change` event to update content, and set initial content.

```html
<x-tabs id="mainTabs">
  <x-tab value="home" toggled>Home</x-tab>
  <x-tab value="about">About</x-tab>
  <x-tab value="contact">Contact</x-tab>
</x-tabs>

<div id="content"></div>

<script>
const tabs = document.getElementById("mainTabs");
const contentDiv = document.getElementById("content");

const pages = {
  home: "<h1>Welcome Home</h1>",
  about: "<h1>About Us</h1>",
  contact: "<h1>Contact Us</h1>"
};

tabs.addEventListener("change", () => {
  contentDiv.innerHTML = pages[tabs.value];
});

// Set initial content
contentDiv.innerHTML = pages[tabs.value];
</script>
```

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

### Include Xel Stylesheet and Script

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/index.md

Include the Xel stylesheet and script in your HTML file to get started.

```html
<!-- Include the Xel stylesheet and script -->
<link rel="stylesheet" href="path/to/xel.css">
<script type="module" src="path/to/xel.js"></script>
```

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

### Building Tab Interfaces with Xel

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This snippet explains how to build tab interfaces using Xel. It directs users to the x-tabs component documentation, its usage examples, and the corresponding section in the quick-reference guide.

```markdown
1. Reference: [x-tabs.md](api-reference/x-tabs.md)
2. Examples: [x-tabs.md](api-reference/x-tabs.md) → Usage Examples
3. Quick lookup: [quick-reference.md](quick-reference.md) → Tabs section
```

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

### Settings Panel with Switches Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This snippet references an example for building a settings panel using Xel switches. Refer to the x-switch.md API documentation for implementation details.

```javascript
// See: [x-switch.md](api-reference/x-switch.md) 
// 	→ Settings Form
```

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

### FAQs with Accordions Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This snippet points to an example showcasing the use of Xel accordions for creating FAQ sections. Consult the x-accordion.md API documentation for implementation details.

```javascript
// See: [x-accordion.md](api-reference/x-accordion.md) 
// 	→ FAQ Section
```

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

### HTML Structure Examples

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-slider.md

Provides examples of how to structure the x-slider component in HTML for various use cases.

```APIDOC
## HTML Structure

```html
<!-- Single value slider -->
<x-slider min="0" max="100" value="50"></x-slider>

<!-- Slider with step and ticks -->
<x-slider min="0" max="100" value="50" step="10" ticks></x-slider>

<!-- Range slider -->
<x-slider min="0" max="100" value="20 80"></x-slider>

<!-- Disabled slider -->
<x-slider min="0" max="100" value="50" disabled></x-slider>

<!-- Large slider with custom range -->
<x-slider min="0" max="1000" value="500" step="50" size="large"></x-slider>
```
```

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

### Importing and Using XInputElement

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-input.md

Shows how to import the XInputElement and use it in HTML. This is the basic setup for using the component.

```javascript
import {XInputElement} from "xel";
```

```html
<x-input type="text" placeholder="Enter text..."></x-input>
```

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

### Basic Event Listening Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/event-emitter.md

Demonstrates how to listen for 'themechange' and 'configchange' events using addEventListener. This is useful for reacting to UI updates or configuration modifications.

```javascript
import Xel from "xel";

// Listen for theme changes
Xel.addEventListener("themechange", () => {
  console.log("Theme changed to:", Xel.theme);
  updateUI();
});

// Listen for config changes
Xel.addEventListener("configchange", (event) => {
  const {key, value} = event.detail;
  console.log(`Config "${key}" changed to`, value);
});
```

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

### XCheckboxElement HTML Structure and Usage Examples

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-checkbox.md

Provides examples of how to use the XCheckboxElement in HTML and JavaScript, demonstrating basic and advanced configurations.

```APIDOC
## HTML Structure

```html
<!-- Basic checkbox -->
<x-checkbox>Accept terms</x-checkbox>

<!-- Checkbox with value -->
<x-checkbox value="newsletter">Subscribe to newsletter</x-checkbox>

<!-- Checked checkbox -->
<x-checkbox toggled>Already subscribed</x-checkbox>

<!-- Mixed state -->
<x-checkbox mixed>Some items selected</x-checkbox>

<!-- Disabled checkbox -->
<x-checkbox disabled>Not available</x-checkbox>

<!-- Large checkbox -->
<x-checkbox size="large">Important</x-checkbox>
```

---

## Usage Examples

### Basic Checkbox

```javascript
const checkbox = document.querySelector("x-checkbox");

checkbox.addEventListener("toggle", (event) => {
  if (checkbox.toggled) {
    console.log("Feature enabled");
  } else {
    console.log("Feature disabled");
  }
});
```

---
```

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

### HTML Structure Examples

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-checkbox.md

Illustrates various ways to use the `<x-checkbox>` element in HTML, including with different attributes.

```html
<!-- Basic checkbox -->
<x-checkbox>Accept terms</x-checkbox>

<!-- Checkbox with value -->
<x-checkbox value="newsletter">Subscribe to newsletter</x-checkbox>

<!-- Checked checkbox -->
<x-checkbox toggled>Already subscribed</x-checkbox>

<!-- Mixed state -->
<x-checkbox mixed>Some items selected</x-checkbox>

<!-- Disabled checkbox -->
<x-checkbox disabled>Not available</x-checkbox>

<!-- Large checkbox -->
<x-checkbox size="large">Important</x-checkbox>
```

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

### Modal Confirmation Dialog Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This snippet indicates an example for creating a modal confirmation dialog with Xel. The x-dialog.md API documentation provides implementation details.

```javascript
// See: [x-dialog.md](api-reference/x-dialog.md) 
// 	→ Confirmation Dialog
```

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

### XAccordionElement HTML Structure Examples

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-accordion.md

Examples demonstrating how to use the XAccordionElement in HTML, including basic, expanded, disabled, and sized variants.

```APIDOC
## HTML Structure

```html
<!-- Basic accordion -->
<x-accordion>
  <h3>Accordion Title</h3>
  <p>This is the accordion content that expands and collapses.</p>
</x-accordion>

<!-- Expanded accordion -->
<x-accordion expanded>
  <h3>Already Expanded</h3>
  <p>This accordion starts in the expanded state.</p>
</x-accordion>

<!-- Disabled accordion -->
<x-accordion disabled>
  <h3>Disabled Accordion</h3>
  <p>Cannot be expanded or collapsed.</p>
</x-accordion>

<!-- Large accordion -->
<x-accordion size="large">
  <h3>Large Title</h3>
  <p>Larger accordion section.</p>
</x-accordion>
```
```

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

### Complete Xel Application Initialization

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/configuration.md

An example demonstrating the full initialization process for a Xel application, including setting configuration endpoints, loading resources, applying user preferences, and setting up event listeners.

```javascript
import Xel, {XButtonElement, XInputElement, XTabsElement} from "xel";

async function initializeApp() {
  try {
    // Set configuration endpoints
    Xel.theme = "/themes/default.css";
    Xel.icons = [
      "/icons/material.svg",
      "/icons/custom.svg"
    ];
    Xel.locales = [
      "/locales/en.ftl",
      "/locales/es.ftl"
    ];

    // Wait for all resources to load
    await Promise.all([
      Xel.whenThemeReady,
      Xel.whenIconsReady,
      Xel.whenLocalesReady
    ]);

    // Load user preferences
    const userPrefs = {
      theme: Xel.getConfig("theme", "light"),
      language: Xel.getConfig("language", "en"),
      accentColor: Xel.getConfig("accentColor", "#0066cc")
    };

    // Apply theme preference
    if (userPrefs.theme === "dark") {
      document.documentElement.classList.add("dark-mode");
    }

    // Set accent color
    Xel.accentColor = userPrefs.accentColor;

    // Set up event listeners
    Xel.addEventListener("configchange", handleConfigChange);
    Xel.addEventListener("themechange", handleThemeChange);
    Xel.addEventListener("accentcolorchange", handleAccentChange);

    // App is ready
    console.log("Xel initialized successfully");
    renderUI();

  } catch (error) {
    console.error("Failed to initialize Xel:", error);
  }
}

function handleConfigChange(event) {
  const {key, value} = event.detail;
  console.log(`Config changed: ${key} = ${value}`);
  
  if (key === "theme") {
    location.reload(); // Reload to apply theme
  }
}

function handleThemeChange() {
  console.log("Theme changed");
  // Re-render if needed
}

function handleAccentChange() {
  console.log("Accent color changed to:", Xel.accentColor);
  // Update UI colors if needed
}

function renderUI() {
  // Render your application
}

// Initialize on DOMContentLoaded
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initializeApp);
} else {
  initializeApp();
}
```

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

### ConfigChangeEvent Detail Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/types.md

Illustrates how to listen for and handle 'configchange' events in Xel. The event detail includes the configuration key, its new value, and the origin of the change.

```typescript
{
  key: string;           // Configuration key name
  value: any | null;     // New value (null if deleted)
  origin: "self";        // Always "self" for config changes
}
```

```javascript
import Xel from "xel";

Xel.addEventListener("configchange", (event) => {
  const {key, value, origin} = event.detail;
  console.log(`Config "${key}" changed to:`, value);
});
```

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

### Basic Volume Slider Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-slider.md

An example of a basic volume control using x-slider. It updates a label and sets audio volume based on the slider's value.

```html
<div id="volumeControl">
  <label>Volume</label>
  <x-slider id="volume" min="0" max="100" value="50"></x-slider>
  <span id="volumeLabel">50%</span>
</div>

<script>
const slider = document.getElementById("volume");
const label = document.getElementById("volumeLabel");

slider.addEventListener("change", () => {
  label.textContent = `${slider.value}%`;
  setAudioVolume(slider.value / 100);
});
</script>
```

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

### Install Xel via npm

Source: https://github.com/jarek-foksa/xel/blob/master/docs/setup.html

Install the Xel NPM package using npm. This package has no dependencies and does not execute any scripts during installation.

```bash
npm install xel
```

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

### Example Xel Theme URLs

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/configuration.md

Demonstrates different ways to specify theme URLs, including local paths, CDN links, and using environment variables for dynamic configuration.

```javascript
// Local theme
Xel.theme = "/styles/theme.css";

// CDN theme
Xel.theme = "https://cdn.example.com/xel-themes/dark.css";

// Using environment variable
Xel.theme = process.env.THEME_URL || "/themes/default.css";
```

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

### Multi-Step Form with Validation Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This snippet references an example demonstrating how to integrate Xel components for a multi-step form with validation. Refer to the x-input.md API documentation for detailed implementation.

```javascript
// See: [x-input.md](api-reference/x-input.md) 
// 	→ Form Integration
```

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

### Handling Toggle Events

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-checkbox.md

Provides an example of listening for the 'toggle' event to react to user interactions.

```javascript
checkbox.addEventListener("toggle", (event) => {
  console.log("Checkbox is now:", checkbox.toggled ? "checked" : "unchecked");
  
  if (checkbox.toggled) {
    // Checked
    doSomething();
  } else {
    // Unchecked
    undoSomething();
  }
});
```

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

### Progress Dialog Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-dialog.md

Demonstrates a dialog used to show a progress bar and status updates during a long-running process. It requires an 'x-progressbar' component.

```html
<button id="startBtn">Start Process</button>

<dialog id="progressDialog">
  <h2>Processing...</h2>
  <x-progressbar id="progress" value="0" max="100"></x-progressbar>
  <p id="statusText">Starting...</p>
</dialog>

<script>
const startBtn = document.getElementById("startBtn");
const dialog = document.getElementById("progressDialog");
const progress = document.getElementById("progress");
const statusText = document.getElementById("statusText");

startBtn.addEventListener("click", async () => {
  dialog.showModal();
  await processItems();
  await dialog.close();
});

async function processItems() {
  for (let i = 0; i <= 100; i += 10) {
    progress.value = i;
    statusText.textContent = `Processing ${i}%...`;
    
    // Simulate work
    await new Promise(resolve => setTimeout(resolve, 500));
  }
}
</script>
```

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

### Confirmation Dialog Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-dialog.md

Demonstrates how to use a dialog for user confirmation before performing an action. Requires a button to trigger and JavaScript to show/hide and handle the response.

```html
<button id="deleteBtn">Delete</button>

<dialog id="confirmDialog">
  <h2>Delete Item</h2>
  <p>Are you sure you want to delete this item?</p>
  <div style="display: flex; gap: 10px;">
    <button onclick="confirmDelete(true)">Delete</button>
    <button onclick="confirmDelete(false)">Cancel</button>
  </div>
</dialog>

<script>
const deleteBtn = document.getElementById("deleteBtn");
const dialog = document.getElementById("confirmDialog");

deleteBtn.addEventListener("click", () => {
  dialog.showModal();
});

async function confirmDelete(confirmed) {
  if (confirmed) {
    await fetch("/api/delete-item", {method: "DELETE"});
    console.log("Item deleted");
  }
  
  await dialog.close();
}
</script>
```

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

### Import and Basic Usage of XButtonElement

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-button.md

Demonstrates how to import the XButtonElement and use it in HTML. This is the basic setup for using the button component.

```javascript
import {XButtonElement} from "xel";
```

```html
<x-button>Click me</x-button>
```

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

### Nested Dialogs Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-dialog.md

Illustrates how to open one dialog from within another. Each dialog has its own open and close mechanisms.

```html
<button id="mainBtn">Open Main Dialog</button>

<dialog id="mainDialog">
  <h2>Main Dialog</h2>
  <p>This is the main dialog</p>
  <button id="nestedBtn">Open Nested Dialog</button>
  <button onclick="mainDialog.close()">Close</button>
</dialog>

<dialog id="nestedDialog">
  <h2>Nested Dialog</h2>
  <p>This is a nested dialog</p>
  <button onclick="nestedDialog.close()">Close</button>
</dialog>

<script>
const mainBtn = document.getElementById("mainBtn");
const mainDialog = document.getElementById("mainDialog");
const nestedBtn = document.getElementById("nestedBtn");
const nestedDialog = document.getElementById("nestedDialog");

mainBtn.addEventListener("click", () => mainDialog.showModal());
nestedBtn.addEventListener("click", () => nestedDialog.showModal());
</script>
```

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

### Using Localization in Xel

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This snippet details the process of implementing localization within Xel applications. It points to the configuration documentation for locale setup, the template utilities for the ftl function, and the main Xel singleton for querying messages.

```markdown
1. Read: [configuration.md](configuration.md) → Locale Configuration
2. Reference: [template-utilities.md](api-reference/template-utilities.md) → ftl function
3. Use: [xel-main.md](api-reference/xel-main.md) → queryMessage method
```

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

### Audio Timeline Scrubber Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-slider.md

Implements an audio timeline scrubber using x-slider. It synchronizes the slider with audio playback, allows seeking, and handles metadata loading.

```html
<div id="player">
  <button id="play">Play</button>
  <x-slider id="timeline" min="0" max="0" value="0"></x-slider>
  <span id="currentTime">0:00</span> / <span id="duration">0:00</span>
</div>

<script>
const timeline = document.getElementById("timeline");
const audio = document.querySelector("audio");

// Update slider max when audio loads
audio.addEventListener("loadedmetadata", () => {
  timeline.max = audio.duration;
});

// Update slider position as audio plays
audio.addEventListener("timeupdate", () => {
  timeline.value = audio.currentTime;
});

// Seek audio when user drags slider
timeline.addEventListener("changestart", () => {
  audio.pause();
});

timeline.addEventListener("change", () => {
  audio.currentTime = timeline.value;
});

timeline.addEventListener("changeend", () => {
  audio.play();
});
</script>
```

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

### Form Dialog Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-dialog.md

Shows how to use a dialog to edit user profile information. It fetches current data, populates form fields, and handles form submission. Requires an 'x-input' component.

```html
<button id="editBtn">Edit Profile</button>

<dialog id="editDialog">
  <h2>Edit Profile</h2>
  <form onsubmit="handleFormSubmit(event)">
    <label>
      Name:
      <x-input id="nameInput" required></x-input>
    </label>
    <label>
      Email:
      <x-input id="emailInput" type="email" required></x-input>
    </label>
    <div style="display: flex; gap: 10px; margin-top: 20px;">
      <button type="submit">Save</button>
      <button type="button" onclick="editDialog.close()">Cancel</button>
    </div>
  </form>
</dialog>

<script>
const editBtn = document.getElementById("editBtn");
const dialog = document.getElementById("editDialog");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");

editBtn.addEventListener("click", async () => {
  // Load current data
  const response = await fetch("/api/user");
  const user = await response.json();
  
  nameInput.value = user.name;
  emailInput.value = user.email;
  
  await dialog.showModal();
});

async function handleFormSubmit(event) {
  event.preventDefault();
  
  if (nameInput.reportValidity() && emailInput.reportValidity()) {
    await fetch("/api/user", {
      method: "PUT",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({
        name: nameInput.value,
        email: emailInput.value
      })
    });
    
    await dialog.close("saved");
  }
}
</script>
```

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

### XSelectElement HTML Structure and Usage

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-select.md

Provides examples of how to structure and use the XSelectElement in HTML and JavaScript.

```APIDOC
## HTML Structure

```html
<!-- Basic select -->
<x-select>
  <x-menuitem value="red">Red</x-menuitem>
  <x-menuitem value="green">Green</x-menuitem>
  <x-menuitem value="blue">Blue</x-menuitem>
</x-select>

<!-- Select with default value -->
<x-select>
  <x-menuitem value="small">Small</x-menuitem>
  <x-menuitem value="medium" toggled>Medium</x-menuitem>
  <x-menuitem value="large">Large</x-menuitem>
</x-select>

<!-- Disabled select -->
<x-select disabled>
  <x-menuitem value="opt1">Option 1</x-menuitem>
  <x-menuitem value="opt2">Option 2</x-menuitem>
</x-select>

<!-- Compact select -->
<x-select compact>
  <x-menuitem value="opt1">Option 1</x-menuitem>
  <x-menuitem value="opt2">Option 2</x-menuitem>
</x-select>
```

---

## Usage Examples

### Basic Select

```javascript
const select = document.querySelector("x-select");

select.addEventListener("change", (event) => {
  const value = select.value;
  console.log("Selected:", value);
  
  // Update UI based on selection
  updatePreview(value);
});
```

---
```

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

### Setting and Getting Input Value

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-input.md

Illustrates how to set and retrieve the value of the x-input element. It also shows how to listen for input events to track value changes.

```javascript
input.value = "user@example.com";
console.log(input.value); // "user@example.com"

// Listen for value changes
input.addEventListener("input", (event) => {
  console.log("Current value:", input.value);
});
```

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

### Basic Toggle Event Listener

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-switch.md

A simple example of adding an event listener to an x-switch to log its state changes to the console when toggled.

```javascript
const switchEl = document.querySelector("x-switch");

switchEl.addEventListener("toggle", () => {
  if (switchEl.toggled) {
    console.log("Feature enabled");
  } else {
    console.log("Feature disabled");
  }
});
```

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

### Import Statements for Xel

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/quick-reference.md

Import the main Xel singleton, specific elements, or utility functions. Ensure Xel is installed as a dependency.

```javascript
// Main Xel singleton
import Xel from "xel";

// Specific elements
import {
  XButtonElement,
  XInputElement,
  XCheckboxElement,
  XSliderElement,
  XSelectElement,
  XTabsElement,
  XTabElement
} from "xel";

// Utilities
import {ftl} from "xel";
```

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

### Custom Storage Interface Implementation

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/types.md

Provides an example of a custom storage implementation that adheres to the Web Storage API interface. This can be assigned to Xel.configStorage for custom configuration persistence.

```typescript
interface Storage {
  length: number;
  getItem(key: string): string | null;
  setItem(key: string, value: string): void;
  removeItem(key: string): void;
  clear(): void;
  key(index: number): string | null;
}
```

```javascript
import Xel from "xel";

class CustomStorage {
  constructor() {
    this.data = new Map();
  }
  
  get length() {
    return this.data.size;
  }
  
  getItem(key) {
    return this.data.get(key) || null;
  }
  
  setItem(key, value) {
    this.data.set(key, value);
  }
  
  removeItem(key) {
    this.data.delete(key);
  }
  
  clear() {
    this.data.clear();
  }
  
  key(index) {
    return Array.from(this.data.keys())[index] || null;
  }
}

Xel.configStorage = new CustomStorage();
```

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

### Internal Event Storage Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/event-emitter.md

Illustrates the internal structure for storing events, where keys are event names and values are arrays of listener functions.

```javascript
#events = {
  "themechange": [listener1, listener2],
  "configchange": [listener3]
}
```

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

### SelectChangeEvent Detail Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/types.md

Shows how to capture 'change' events from an <x-select> element. The event detail provides the previous and new selected values.

```typescript
{
  oldValue: string | null;
  newValue: string | null;
}
```

```javascript
const select = document.querySelector("x-select");

select.addEventListener("change", (event) => {
  const {oldValue, newValue} = event.detail;
  console.log(`Selection changed from "${oldValue}" to "${newValue}"`);
});
```

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

### ConfigValue Examples

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/types.md

Demonstrates setting various JSON-serializable values in Xel configuration using Xel.setConfig(). Supported types include string, number, boolean, null, arrays, and objects.

```javascript
import Xel from "xel";

// String
Xel.setConfig("theme", "dark");

// Number
Xel.setConfig("fontSize", 14);

// Boolean
Xel.setConfig("autoSave", true);

// Object
Xel.setConfig("preferences", {
  language: "en",
  notifications: true
});

// Array
Xel.setConfig("recentFiles", ["file1.txt", "file2.txt"]);
```

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

### Dynamic Tab Content Loading

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-tabs.md

Load and display product information dynamically when a tab is selected. This example fetches data from an API and updates the DOM.

```html
<x-tabs id="categoryTabs">
  <x-tab value="electronics" toggled>Electronics</x-tab>
  <x-tab value="clothing">Clothing</x-tab>
  <x-tab value="books">Books</x-tab>
</x-tabs>

<div id="products"></div>

<script>
const tabs = document.getElementById("categoryTabs");
const productsDiv = document.getElementById("products");

tabs.addEventListener("change", async () => {
  const category = tabs.value;
  const response = await fetch(`/api/products/${category}`);
  const products = await response.json();
  
  productsDiv.innerHTML = products
    .map(p => `<div class="product">${p.name} - $${p.price}</div>`)
    .join("");
});

// Load initial products
tabs.dispatchEvent(new CustomEvent("change"));
</script>
```

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

### Set and Get Theme URL

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/xel-main.md

Configure the Xel theme by setting its URL. The system automatically updates the meta tag and provides a way to wait for the theme to be ready.

```javascript
import Xel from "xel";

// Set theme
Xel.theme = "https://example.com/themes/dark.css";

// Get current theme
console.log(Xel.theme); // "https://example.com/themes/dark.css"

// Wait for theme to load
await Xel.whenThemeReady;
console.log("Theme loaded!");
```

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

### Price Range Selector Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-slider.md

Demonstrates a price range selector using a range-enabled x-slider. It updates price labels and filters products based on the selected range.

```html
<div id="priceRange">
  <label>Price Range</label>
  <x-slider id="price" min="0" max="1000" value="100 500" step="50" ticks></x-slider>
  <p>$<span id="minPrice">100</span> - $<span id="maxPrice">500</span></p>
</div>

<script>
const slider = document.getElementById("price");
const minLabel = document.getElementById("minPrice");
const maxLabel = document.getElementById("maxPrice");

slider.addEventListener("change", () => {
  const [min, max] = slider.value;
  minLabel.textContent = min;
  maxLabel.textContent = max;
  filterProducts(min, max);
});
</script>
```

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

### Set and Get Icon URLs

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/xel-main.md

Configure Xel icons by providing an array of SVG file URLs. The system updates the meta tag and allows waiting for icon readiness.

```javascript
// Set multiple icon files
Xel.icons = [
  "https://example.com/icons/material.svg",
  "https://example.com/icons/custom.svg"
];

// Get icons (returns copy)
console.log(Xel.icons); // ["https://example.com/icons/material.svg", ...]

// Wait for icons to load
await Xel.whenIconsReady;
```

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

### Styling Tabs with CSS

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-tabs.md

Customize the appearance of x-tabs and x-tab elements using CSS. This example demonstrates styling for borders, padding, hover effects, and disabled states.

```css
x-tabs {
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
}

x-tab {
  padding: 12px 24px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}

x-tab:hover:not([disabled]) {
  background-color: #f0f0f0;
}

x-tab[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

x-tab::part(selection-indicator) {
  background-color: var(--accent-color);
  height: 3px;
}
```

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

### Changing Button Skin and Size

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-button.md

Provides examples of how to change the visual appearance of the button using the 'skin' property and adjust its size with the 'size' property. The 'size' property can be reset to null for the default size.

```javascript
button.skin = "flat";
button.skin = "recessed";

button.size = "small";
button.size = "large";
button.size = null; // Reset to normal
```

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

### theme

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/xel-main.md

Sets or gets the theme URL. When set, a <meta name="xel-theme"> element is automatically created or updated in the document head. Emits a `themechange` event.

```APIDOC
## theme

### Description
Sets or gets the theme URL. When set, a `<meta name="xel-theme">` element is automatically created or updated in the document head. Emits a `themechange` event.

### Type
`string | null`

### Default
`null`

### Readable
Yes

### Writable
Yes

### Example
```javascript
import Xel from "xel";

// Set theme
Xel.theme = "https://example.com/themes/dark.css";

// Get current theme
console.log(Xel.theme); // "https://example.com/themes/dark.css"

// Wait for theme to load
await Xel.whenThemeReady;
console.log("Theme loaded!");
```
```

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

### Set and Get Locale URLs

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/xel-main.md

Configure Xel localization by providing an array of locale file URLs. The system updates the meta tag and allows waiting for locale readiness.

```javascript
Xel.locales = [
  "locales/en.ftl",
  "locales/fr.ftl",
  "locales/de.ftl"
];

await Xel.whenLocalesReady;
console.log("Locales loaded!");
```

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

### Listen for Slider Drag Start

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-slider.md

Fires when the user begins dragging the slider thumb. Use this to pause other actions or log the start of an interaction.

```javascript
slider.addEventListener("changestart", (event) => {
  console.log("User started dragging");
  console.log("Dragging:", slider.dragging);
});
```

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

### Basic FAQ Section with Accordions

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-accordion.md

Demonstrates how to use multiple x-accordion components to create a FAQ section. Includes JavaScript to ensure only one accordion is expanded at a time.

```html
<div id="faqContainer">
  <x-accordion>
    <h3>What is Xel?</h3>
    <p>Xel is a widget toolkit for building modern web applications.</p>
  </x-accordion>
  
  <x-accordion>
    <h3>How do I use it?</h3>
    <p>Import the components and use them in your HTML.</p>
  </x-accordion>
  
  <x-accordion>
    <h3>Is it free?</h3>
    <p>Yes, Xel is open source and released under the MIT license.</p>
  </x-accordion>
</div>

<script>
const accordions = document.querySelectorAll("x-accordion");

// Only one accordion open at a time
accordions.forEach(accordion => {
  accordion.addEventListener("expand", async () => {
    // Collapse others
    accordions.forEach(other => {
      if (other !== accordion && other.expanded) {
        await other.collapse();
      }
    });
  });
});
</script>
```

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

### Listen to Xel Singleton Events

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/quick-reference.md

Demonstrates how to listen for global Xel events such as theme changes, icon updates, locale changes, and configuration updates.

```javascript
Xel.addEventListener("themechange", handler);
Xel.addEventListener("iconschange", handler);
Xel.addEventListener("localeschange", handler);
Xel.addEventListener("accentcolorchange", handler);
Xel.addEventListener("configchange", (event) => {
  const {key, value, origin} = event.detail;
});
```

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

### Exclusive Tab Navigation Example

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/README.md

This snippet references an example demonstrating exclusive tab navigation using Xel tabs. For implementation guidance, refer to the x-tabs.md API documentation.

```javascript
// See: [x-tabs.md](api-reference/x-tabs.md) 
// 	→ Usage Examples
```

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

### Importing and Using XCheckboxElement

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-checkbox.md

Demonstrates how to import the XCheckboxElement and use it in HTML.

```javascript
import {XCheckboxElement} from "xel";
```

```html
<x-checkbox>Accept terms</x-checkbox>
```

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

### Setting the Minimum Value

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-slider.md

Shows how to set and get the minimum value of the slider programmatically.

```javascript
const slider = document.querySelector("x-slider");
slider.min = 0;
console.log(slider.min); // 0
```

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

### Basic Accordion HTML Structure

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-accordion.md

Example of a basic accordion element in HTML with a title and content.

```html
<!-- Basic accordion -->
<x-accordion>
  <h3>Accordion Title</h3>
  <p>This is the accordion content that expands and collapses.</p>
</x-accordion>
```

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

### Complete Xel Initialization

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/xel-main.md

Initializes the Xel application by setting theme, icons, and locales, then waits for them to be ready before proceeding. This ensures all resources are loaded before using core functionalities like queryIcon and queryMessage.

```javascript
import Xel from "xel";

async function initializeApp() {
  // Set theme and resources
  Xel.theme = "https://cdn.example.com/themes/modern.css";
  Xel.icons = ["https://cdn.example.com/icons/material.svg"];
  Xel.locales = ["locales/en.ftl", "locales/fr.ftl"];

  // Wait for everything to load
  await Promise.all([
    Xel.whenThemeReady,
    Xel.whenIconsReady,
    Xel.whenLocalesReady
  ]);

  console.log("App ready!");
  
  // Now safe to use queryIcon and queryMessage
  const settingsIcon = Xel.queryIcon("settings");
  const greeting = Xel.queryMessage("#appTitle");
}

initializeApp();
```

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

### Styling the Arrow Part of XSelectElement

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-select.md

Example of how to style the dropdown arrow using the ::part() pseudo-element.

```css
x-select::part(arrow) {
  color: blue;
}
```

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

### Setting and Getting Checkbox Value

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-checkbox.md

Shows how to assign a unique string value to a checkbox and retrieve it.

```javascript
const checkbox = document.querySelector("x-checkbox");
checkbox.value = "option-1";
console.log(checkbox.value); // "option-1"
```

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

### Load Configuration from Environment

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/configuration.md

Load Xel configuration settings like theme, icons, and locales from environment variables. Provides default values if environment variables are not set.

```javascript
// Load configuration from environment
const config = {
  theme: process.env.THEME_URL || "/themes/default.css",
  icons: (process.env.ICON_URLS || "/icons/default.svg").split(","),
  locales: (process.env.LOCALE_URLS || "/locales/en.ftl").split(","),
  storageType: process.env.STORAGE_TYPE || "localStorage"
};

import Xel from "xel";

Xel.theme = config.theme;
Xel.icons = config.icons;
Xel.locales = config.locales;

// Set storage based on environment
if (config.storageType === "session") {
  Xel.configStorage = sessionStorage;
} else if (config.storageType === "custom") {
  Xel.configStorage = myCustomStorage;
} else {
  Xel.configStorage = localStorage;
}
```

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

### accentColor

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/xel-main.md

Sets or gets the accent color used throughout the toolkit components. Emits an `accentcolorchange` event.

```APIDOC
## accentColor

### Description
Sets or gets the accent color used throughout the toolkit components. Emits an `accentcolorchange` event.

### Type
`string`

### Default
`null`

### Readable
Yes

### Writable
Yes

### Example
```javascript
// Set accent color
Xel.accentColor = "#0066cc";

// Get accent color
console.log(Xel.accentColor); // "#0066cc"
```
```

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

### Set Up Xel Localization

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/index.md

Set up multi-language support for Xel by providing locale files and querying localized messages.

```javascript
import {ftl} from "xel";

Xel.locales = ["locales/en.ftl", "locales/fr.ftl"];

await Xel.whenLocalesReady;

// Query localized messages
const msg = Xel.queryMessage("#greeting", {name: "John"});
console.log(msg.content);
```

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

### Configure Xel Icon Resources

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/index.md

Configure icon resources for Xel and wait for them to be ready. Includes querying icons.

```javascript
Xel.icons = [
  "https://example.com/icons/material.svg",
  "https://example.com/icons/custom.svg"
];

await Xel.whenIconsReady;

// Query icons
const icon = Xel.queryIcon("settings");
```

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

### Expanded Accordion HTML Structure

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-accordion.md

Example of an accordion element initialized in the expanded state using the 'expanded' attribute.

```html
<!-- Expanded accordion -->
<x-accordion expanded>
  <h3>Already Expanded</h3>
  <p>This accordion starts in the expanded state.</p>
</x-accordion>
```

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

### Import and Basic HTML Structure for XSelectElement

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-select.md

Shows how to import the XSelectElement and how to structure it in HTML with menu items.

```javascript
import {XSelectElement} from "xel";
```

```html
<x-select>
  <x-menuitem value="opt1">Option 1</x-menuitem>
  <x-menuitem value="opt2">Option 2</x-menuitem>
</x-select>
```

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

### Styling Accordion Arrow Part

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-accordion.md

Provides a CSS example for styling the 'arrow' part of the accordion, which is the clickable icon.

```css
x-accordion::part(arrow) {
  color: #0066cc;
  width: 24px;
  height: 24px;
}
```

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

### Using Xel Components in HTML

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/index.md

Demonstrates the direct usage of various Xel components within HTML markup.

```html
<x-button>Simple Button</x-button>

<x-input type="text" placeholder="Enter text..."></x-input>

<x-checkbox>Accept terms</x-checkbox>

<x-slider min="0" max="100" value="50"></x-slider>

<x-tabs>
  <x-tab value="tab1" toggled>Tab 1</x-tab>
  <x-tab value="tab2">Tab 2</x-tab>
</x-tabs>
```

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

### Get Xel Configuration Value

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/quick-reference.md

Retrieve a configuration value by its key. A default value can be provided if the key does not exist.

```javascript
// Get value
const theme = Xel.getConfig("userTheme", "light");
```

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

### Import Xel Main Class

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/xel-main.md

Import the default export from the Xel library.

```javascript
import Xel from "xel";
```

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

### Get Current Locale

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/quick-reference.md

Retrieve the currently active locale string. This can be used to adapt UI or content dynamically.

```javascript
// Get current locale
console.log(Xel.locale); // "en"
```

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

### Get Current Locale

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/xel-main.md

Retrieve the currently active locale language code. Defaults to 'en' if no locales are loaded.

```javascript
console.log(Xel.locale); // "en"
```

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

### Disabled Accordion HTML Structure

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-accordion.md

Example of a disabled accordion element using the 'disabled' attribute, preventing user interaction.

```html
<!-- Disabled accordion -->
<x-accordion disabled>
  <h3>Disabled Accordion</h3>
  <p>Cannot be expanded or collapsed.</p>
</x-accordion>
```

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

### Basic Checkbox Usage with Event Listener

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-checkbox.md

A simple example of adding a toggle event listener to a checkbox to log its state.

```javascript
const checkbox = document.querySelector("x-checkbox");

checkbox.addEventListener("toggle", (event) => {
  if (checkbox.toggled) {
    console.log("Feature enabled");
  } else {
    console.log("Feature disabled");
  }
});
```

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

### Configure Xel Storage Backend

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/configuration.md

Set the storage backend for Xel configuration. Options include `localStorage` (default), `sessionStorage`, or a custom implementation adhering to the Storage interface.

```javascript
import Xel from "xel";

// Use localStorage (default)
Xel.configStorage = localStorage;

// Use sessionStorage
Xel.configStorage = sessionStorage;

// Use custom storage
Xel.configStorage = {
  getItem(key) { /* ... */ },
  setItem(key, value) { /* ... */ },
  removeItem(key) { /* ... */ },
  clear() { /* ... */ },
  length: 0,
  key(index) { /* ... */ }
};
```

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

### changestart Event

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-slider.md

Fired when the user starts dragging a slider thumb. This event is useful for tracking the beginning of a drag operation.

```APIDOC
## changestart Event

### Description
Fired when the user starts dragging a slider thumb.

### Event Type
CustomEvent

### Bubbles
Yes

### Cancelable
No

### Detail
None

### Example
```javascript
slider.addEventListener("changestart", (event) => {
  console.log("User started dragging");
  console.log("Dragging:", slider.dragging);
});
```
```

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

### locales

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/xel-main.md

Sets or gets localization file URLs. Files should use the Fluent (.ftl) format. Emits a `localeschange` event.

```APIDOC
## locales

### Description
Sets or gets localization file URLs. Files should use the Fluent (.ftl) format. Emits a `localeschange` event.

### Type
`Array<string>`

### Default
`[]`

### Readable
Yes (returns array copy)

### Writable
Yes (accepts array)

### Example
```javascript
Xel.locales = [
  "locales/en.ftl",
  "locales/fr.ftl",
  "locales/de.ftl"
];

await Xel.whenLocalesReady;
console.log("Locales loaded!");
```
```

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

### Basic Xel Usage with ES Modules

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/index.md

Import Xel components and configure theme and locales in an ES module. Create and append elements programmatically.

```html
<!-- Import in ES modules -->
<script type="module">
  import Xel, {XButtonElement, XInputElement} from "xel";
  
  // Configure theme and locales
  Xel.theme = "https://example.com/theme.css";
  Xel.locales = ["locales/en.ftl"];
  
  // Create elements programmatically
  const button = document.createElement("x-button");
  button.textContent = "Click me";
  button.addEventListener("click", () => {
    console.log("Clicked!");
  });
  
  document.body.appendChild(button);
</script>
```

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

### Get Owner Buttons Element

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-button.md

Retrieve the parent <x-buttons> element if the button is part of a group. Returns null if not in a group.

```javascript
const owner = button.ownerButtons;
if (owner) {
  console.log("Button is in a button group");
}
```

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

### Set Up Global Localization with ftl()

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/template-utilities.md

Configure global localization by importing Fluent files using Xel.locales. This allows application-wide access to localized messages.

```javascript
// locales/en.ftl
greeting = Hello, {$name}!
app-title = My Application
menu-file = File
menu-edit = Edit
menu-view = View

// In your app
import Xel from "xel";

Xel.locales = ["locales/en.ftl", "locales/fr.ftl"];

await Xel.whenLocalesReady;

const title = Xel.queryMessage("#app-title");
document.title = title.content;
```

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

### Configure Xel Theme

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/quick-reference.md

Set the Xel theme by providing a path to a CSS file. Use `whenThemeReady` to ensure the theme is loaded before proceeding.

```javascript
// Theme
Xel.theme = "path/to/theme.css";
await Xel.whenThemeReady;
```

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

### Large Size Accordion HTML Structure

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-accordion.md

Example of an accordion element with the 'large' size variant applied via the 'size' attribute.

```html
<!-- Large accordion -->
<x-accordion size="large">
  <h3>Large Title</h3>
  <p>Larger accordion section.</p>
</x-accordion>
```

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

### XTabsElement Properties

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-tabs.md

Manages a group of tab items and handles tab switching. The 'value' property gets or sets the selected tab.

```APIDOC
## XTabsElement

### Description
A container that manages a group of tab items and handles tab switching.

### Properties
#### value
- **Type**: `string | null`
- **Default**: `null`
- **Description**: Gets or sets the selected tab by matching the `value` attribute of child `<x-tab>` elements. Returns `null` if no tab is selected.

### Events
#### change
- **Description**: Fired when the user clicks a different tab to switch to it.
- **Event Type**: CustomEvent
- **Bubbles**: Yes
- **Cancelable**: No
- **Detail**: None
```

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

### Import and Basic HTML Usage

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-slider.md

Demonstrates how to import the XSliderElement and use it in HTML with initial properties.

```javascript
import {XSliderElement} from "xel";

// Or in HTML
<x-slider min="0" max="100" value="50"></x-slider>
```

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

### Setting and Getting the Value of XSelectElement

Source: https://github.com/jarek-foksa/xel/blob/master/_autodocs/api-reference/x-select.md

Demonstrates how to programmatically set the selected value and listen for changes. Returns null if no item is selected.

```javascript
const select = document.querySelector("x-select");
select.value = "option-2";
console.log(select.value); // "option-2"

// Listen for changes
select.addEventListener("change", (event) => {
  console.log("Selected:", select.value);
});
```