Elevation

<div
    style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px; transition-duration: 200ms;"
    tabindex="0"
>
    <mdc-elevation style="--mdc-elevation-level: 3;"></mdc-elevation>
</div>

<div
    style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px; transition-duration: 200ms;"
    tabindex="0"
>
    <mdc-elevation disabled style="--mdc-elevation-level: 3;"></mdc-elevation>
</div>

<div
    style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px; transition-duration: 200ms;"
    tabindex="0"
>
    <mdc-elevation style="--mdc-elevation-level: 3;"></mdc-elevation>
</div>

<div
    style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px; transition-duration: 200ms;"
    tabindex="0"
>
    <mdc-elevation ignore-global-config style="--mdc-elevation-level: 3;"></mdc-elevation>
</div>

<style>
    .elevation-interval-demo {
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-family: system-ui, -apple-system, sans-serif;
    }

    .status-indicator {
        font-size: 14px;
        font-weight: 500;
        color: #6750a4;
    }
</style>

<div class="elevation-interval-demo">
    <div class="status-indicator">
        disabled: <span id="elevation-interval-val">false</span> (toggling every 800ms)
    </div>

    <div
        style="position: relative; height: 48px; width: 56px; box-sizing: border-box; border: 1px solid black; margin: 4px; transition-duration: 200ms;"
        tabindex="0"
    >
        <mdc-elevation
            id="interval-elevation"
            style="--mdc-elevation-level: 3;transition-duration: 200ms;"
        ></mdc-elevation>
    </div>
</div>

<script>
    (() => {
        const elevation = document.getElementById('interval-elevation')
        const valDisplay = document.getElementById('elevation-interval-val')

        setInterval(() => {
            if (!elevation) return

            const next = !elevation.disabled
            elevation.disabled = next
            if (valDisplay) valDisplay.textContent = String(next)
        }, 800)
    })()
</script>

<style>
    .elevation-level-demo {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        font-family: system-ui, -apple-system, sans-serif;
    }

    .elevation-level-box {
        position: relative;
        height: 96px;
        width: 96px;
        box-sizing: border-box;
        border: 1px solid #d9d9e3;
        border-radius: 8px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #49454f;
        transition-duration: 500ms;
    }
</style>

<div class="elevation-level-demo">
    <div
        class="elevation-level-box"
        tabindex="0"
    >
        <mdc-elevation style="--mdc-elevation-level: 0;"></mdc-elevation>
        Level 0
    </div>

    <div
        class="elevation-level-box"
        tabindex="0"
    >
        <mdc-elevation style="--mdc-elevation-level: 1;"></mdc-elevation>
        Level 1
    </div>

    <div
        class="elevation-level-box"
        tabindex="0"
    >
        <mdc-elevation style="--mdc-elevation-level: 2;"></mdc-elevation>
        Level 2
    </div>

    <div
        class="elevation-level-box"
        tabindex="0"
    >
        <mdc-elevation style="--mdc-elevation-level: 3;"></mdc-elevation>
        Level 3
    </div>

    <div
        class="elevation-level-box"
        tabindex="0"
    >
        <mdc-elevation style="--mdc-elevation-level: 4;"></mdc-elevation>
        Level 4
    </div>

    <div
        class="elevation-level-box"
        tabindex="0"
    >
        <mdc-elevation style="--mdc-elevation-level: 5;"></mdc-elevation>
        Level 5
    </div>
</div>