### Install Material Solid Packages

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Installs the necessary packages for Material Solid components, theming, and utilities using npm, yarn, or pnpm.

```bash
npm install @material-solid/components @material-solid/vanilla-extract @material-solid/utils
```

```bash
yarn add @material-solid/components @material-solid/vanilla-extract @material-solid/utils
```

```bash
pnpm install @material-solid/components @material-solid/vanilla-extract @material-solid/utils
```

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

### Slider Component Examples (SolidJS)

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Provides examples of the Slider component from @material-solid/components for selecting values within a range. It shows how to set minimum/maximum values, steps, format labels, and handle value changes for different use cases like volume and brightness.

```tsx
import { Slider } from "@material-solid/components";
import { createSignal } from "solid-js";

function VolumeControl() {
  const [volume, setVolume] = createSignal(50);
  const [brightness, setBrightness] = createSignal(0.7);

  return (
    <>
      <Slider
        from={0}
        to={100}
        steps={1}
        value={volume()}
        onChanged={setVolume}
        labelFormatter={(val) => `${val}%`} />

      <Slider
        from={0}
        to={1}
        value={brightness()}
        onChanged={(val) => {
          setBrightness(val);
          applyBrightness(val);
        }}
        valueFormatter={(val) => Math.round(val * 100)}
        labelFormatter={(val) => `${val}%`} />
    </>
  );
}
```

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

### IconButton Component Examples (SolidJS)

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Demonstrates the usage of the IconButton component from @material-solid/components with various variants (regular, filled, filledTonal, outlined) and properties like disabled, onClick, selected, and as a link. It shows how to include Material Symbols for icons.

```tsx
import { IconButton } from "@material-solid/components";

// Regular icon button (no background)
<IconButton variant="regular">
  <span class="material-symbols">menu</span>
</IconButton>

// Filled icon button
<IconButton
  variant="filled"
  disabled={false}
  onClick={() => console.log("favorite")}>
  <span class="material-symbols">favorite</span>
</IconButton>

// Filled tonal with selection state
<IconButton
  variant="filledTonal"
  selected={isBookmarked()}
  onClick={toggleBookmark}>
  <span class="material-symbols">
    {isBookmarked() ? "bookmark" : "bookmark_border"}
  </span>
</IconButton>

// Outlined icon button
<IconButton variant="outlined">
  <span class="material-symbols">share</span>
</IconButton>

// Icon button as link
<IconButton
  variant="regular"
  as="a"
  href="/settings">
  <span class="material-symbols">settings</span>
</IconButton>
```

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

### Switch Component Implementation (SolidJS)

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Illustrates the use of the Switch component from @material-solid/components for binary on/off states. It demonstrates binding to signals, handling change events, and customizing the selected/unselected icons.

```tsx
import { Switch } from "@material-solid/components";
import { createSignal } from "solid-js";

function SettingsPanel() {
  const [darkMode, setDarkMode] = createSignal(false);
  const [notifications, setNotifications] = createSignal(true);

  return (
    <>
      <label>
        <Switch
          value={darkMode()}
          onChanged={setDarkMode} />
        Dark mode
      </label>

      <label>
        <Switch
          value={notifications()}
          onChanged={(value) => {
            setNotifications(value);
            console.log("Notifications:", value);
          }}
          selectedIcon={<span class="material-symbols">check</span>}
          unselectedIcon={<span class="material-symbols">close</span>} />
        Enable notifications
      </label>
    </>
  );
}
```

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

### MultiProvider Utility for Context Nesting (SolidJS)

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Demonstrates the MultiProvider utility from @material-solid/utils for cleanly nesting multiple SolidJS context providers. It accepts an array of providers and their corresponding values, simplifying context management in applications.

```tsx
import { MultiProvider } from "@material-solid/utils";
import { ThemeContext, AuthContext, I18nContext } from "./contexts";

function App() {
  return (
    <MultiProvider
      providers={[
        [ThemeContext, { theme: "dark" }],
        [AuthContext, { user: currentUser() }],
        I18nContext,
      ]}>
      <Router />
    </MultiProvider>
  );
}
```

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

### Create Material Design Theme with Vanilla Extract

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Generates a Material Design 3 theme from a seed color using Material Solid's theming system and Vanilla Extract. Supports dynamic color schemes and defines theme contracts for application-wide styling.

```typescript
import { createMaterialTheme } from "@material-solid/vanilla-extract";
import { createTheme, style } from "@vanilla-extract/css";

const materialTheme = createMaterialTheme({
  color: {
    seed: Hct.fromInt(0xFF6200EE),
    variant: "tonalSpot",
    contrastLevel: 0,
  },
  typeface: {
    brand: ["Roboto", "sans-serif"],
    plain: ["Roboto", "sans-serif"],
  },
});

const themeContract = materialTheme.createContract();
const lightTheme = createTheme(themeContract, materialTheme.createTheme("light"));
const darkTheme = createTheme(themeContract, materialTheme.createTheme("dark"));

const appStyle = style({
  backgroundColor: themeContract.color.surface,
  color: themeContract.color.onSurface,
});
```

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

### Material Solid Button Component Variants

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Demonstrates the usage of Material Design 3 button components in SolidJS, showcasing five variants (elevated, filled, filledTonal, outlined, text) with options for icons, labels, and event handling.

```tsx
import { Button } from "@material-solid/components";

// Elevated button with leading icon
<Button.elevated
  label="Elevated"
  icon="star"
  iconAffinity="leading"
  onClick={() => console.log("clicked")} />

// Filled button (highest emphasis)
<Button.filled
  label="Filled Button"
  disabled={false} />

// Filled tonal button (medium emphasis)
<Button.filledTonal
  label="Subscribe"
  icon="notifications"
  iconAffinity="trailing" />

// Outlined button
<Button.outlined
  label="Cancel"
  onClick={handleCancel} />

// Text button (lowest emphasis)
<Button.text
  label="Learn More"
  as="a"
  href="/docs" />

// Full variant specification
<Button
  variant="filled"
  label="Custom Button"
  icon="add"
  disabled={false}
  onClick={() => console.log("action")} />
```

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

### Render Components Outside DOM with Portal Utility (TSX)

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Demonstrates how to use the Portal utility to render dialogs and popovers outside the main DOM hierarchy. It utilizes HTMLDialogElement or the Popover API for supported environments. This is an experimental feature.

```tsx
import { Portal } from "@material-solid/utils";

// Dialog portal (uses HTMLDialogElement when supported)
<Portal.dialog>
  <DialogContent />
</Portal.dialog>

// Popover portal (uses Popover API when supported)
<Portal.popover component="div">
  <TooltipContent />
</Portal.popover>
```

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

### Tab Bar Component Structure (SolidJS)

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Demonstrates the structure of the TabBar, Tab, and TabIndicator components from @material-solid/components for content organization and navigation. It uses SolidJS's `For` loop to render tabs dynamically and manages the active tab state.

```tsx
import { TabBar, Tab, TabIndicator } from "@material-solid/components";
import { createSignal, For } from "solid-js";

function Dashboard() {
  const [activeTab, setActiveTab] = createSignal(0);
  const tabs = ["Overview", "Analytics", "Reports", "Settings"];

  return (
    <TabBar
      activeTab={activeTab()}
      onTabChange={setActiveTab}>
      <For each={tabs}>{(label, index) => (
        <Tab
          index={index()}
          active={activeTab() === index()}
          onClick={() => setActiveTab(index())}>
          {label}
        </Tab>
      )}</For>
      <TabIndicator activeTab={activeTab()} />
    </TabBar>
  );
}
```

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

### Focus Component Integration (SolidJS)

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Shows how to use the Focus component from @material-solid/components to add a focus indicator ring for keyboard navigation. It requires a reference to the focusable element and is typically used on elements like divs with `tabIndex`.

```tsx
import { Focus } from "@material-solid/components";
import { createSignal } from "solid-js";

function CustomCard() {
  const [ref, setRef] = createSignal();

  return (
    <div
      ref={setRef}
      tabIndex={0}
      style={{ position: "relative" }}>
      <Focus for={ref} />
      Focusable card content
    </div>
  );
}
```

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

### Ripple Component Usage (SolidJS)

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Shows how to implement the Ripple component from @material-solid/components to add a Material Design ripple effect to interactive elements. It requires a reference to the target element and handles touch/pointer events, animations, and different states.

```tsx
import { Ripple } from "@material-solid/components";
import { createSignal } from "solid-js";

function CustomButton() {
  const [ref, setRef] = createSignal();
  const [disabled, setDisabled] = createSignal(false);

  return (
    <button
      ref={setRef}
      disabled={disabled()}
      style={{
        position: "relative",
        overflow: "hidden",
      }}>
      <Ripple
        for={ref}
        disabled={disabled()} />
      Click me
    </button>
  );
}

// Ripple automatically handles:
// - Touch and pointer events
// - Press and release animations
// - Hover states
// - Focus states
// - Forced colors mode
```

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

### Material Solid Text Field Component

Source: https://context7.com/deminearchiver/material-solid/llms.txt

Implements Material Design 3 text input fields in SolidJS, supporting both filled and outlined variants. Includes features like labels, placeholders, input handling, and programmatic focus control.

```tsx
import { FilledTextField } from "@material-solid/components";
import { createSignal } from "solid-js";

function LoginForm() {
  const [email, setEmail] = createSignal("");
  const [password, setPassword] = createSignal("");
  let fieldRef;

  return (
    <>
      <FilledTextField
        ref={fieldRef}
        type="email"
        value={email()}
        label="Email address"
        placeholder="you@example.com"
        required={true}
        disabled={false}
        onInput={(e) => setEmail(e.currentTarget.value)}
        onChange={(e) => console.log("Email changed:", e.currentTarget.value)} />

      <FilledTextField
        type="password"
        value={password()}
        label="Password"
        required={true}
        onInput={(e) => setPassword(e.currentTarget.value)} />

      <button onClick={() => fieldRef?.focus()}>
        Focus email field
      </button>
    </>
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.